gpt4 book ai didi

javascript - AMcharts:根据值的范围设置 fillColors 字段的颜色

转载 作者:行者123 更新时间:2023-11-28 06:15:35 25 4
gpt4 key购买 nike

因此,如果值在一定范围内,我想更改各个条形的颜色。我如何在 JavaScript 中执行此操作?我真的不想弄乱我的 JSON 数据。

var chart = AmCharts.makeChart( "chartdiv", {
"type": "serial",
"theme": "none",
"dataProvider": [ {
"country": "USA",
"visits": 2025
}, {
"country": "China",
"visits": 1882
}, {
"country": "Japan",
"visits": 1809
}, {
"country": "Germany",
"visits": 1322
}, {
"country": "UK",
"visits": 1122
}, {
"country": "France",
"visits": 1114
}, {
"country": "India",
"visits": 984
}, {
"country": "Spain",
"visits": 711
}, {
"country": "Netherlands",
"visits": 665
}, {
"country": "Russia",
"visits": 580
}, {
"country": "South Korea",
"visits": 443
}, {
"country": "Canada",
"visits": 441
}, {
"country": "Brazil",
"visits": 395
} ],
"valueAxes": [ {
"gridColor": "#FFFFFF",
"gridAlpha": 0.2,
"dashLength": 0
} ],
"gridAboveGraphs": true,
"startDuration": 1,
"graphs": [ {
"balloonText": "[[category]]: <b>[[value]]</b>",
"fillAlphas": 0.8,
"lineAlpha": 0.2,
"fillColors": changeColour,
"type": "column",
"valueField": "visits"
} ],
"chartCursor": {
"categoryBalloonEnabled": false,
"cursorAlpha": 0,
"zoomable": false
},
"categoryField": "country",
"categoryAxis": {
"gridPosition": "start",
"gridAlpha": 0,
"tickPosition": "start",
"tickLength": 20
},
"export": {
"enabled": true
}

} );

function changeColour(value){
/*var colour;
if (0 <= value && value <= 40){
colour = "#ff3333";
} else if (41 <= value && value <= 66){
colour = "#ff751a";
} else if (value > 66){
colour = "#009933";
}*/
//return colour;
return "#ff3333";
}

我创建了一个函数,如果值在某个数字内,我试图返回颜色,但这不起作用。

这是一个我正在弄清楚如何做到这一点的示例。 https://jsfiddle.net/ckylec4/8to7hghj/2/

最佳答案

图表不支持自定义函数作为颜色格式化程序。

可能唯一的解决方案是预处理数据,并为每个数据点设置 fillColorsField

AmCharts.addInitHandler()似乎是所有类型预处理的完美工具。

让我们“发明”一个我们将使用的新参数fillColorsFunction。我们可以为此重用您的函数 changeColour:

"graphs": [{
"balloonText": "[[category]]: <b>[[value]]</b>",
"fillAlphas": 0.8,
"lineAlpha": 0.2,
"fillColorsFunction": changeColour,
"type": "column",
"valueField": "visits"
}],

现在,让我们创建一个使用它的“插件”:

/**
* Plugin: checks for graphs with "fillColorsFunction"
*/
AmCharts.addInitHandler(function(chart) {

// iterate thorugh all graphs and check if they have
// fillColorsFunction set
for (i = 0; i < chart.graphs.length; i++) {
var graph = chart.graphs[i];
if (graph.fillColorsFunction !== undefined) {
// iterate thorugh all of the data and add color
graph.fillColorsField = graph.valueField + "FillColor";
for (var x = 0; x < chart.dataProvider.length; x++) {
var dp = chart.dataProvider[x];
dp[graph.fillColorsField] = graph.fillColorsFunction.call(this, dp[graph.valueField]);
}
}
}

}, ["serial"]);

这是整个工作内容: http://codepen.io/team/amcharts/pen/963bb83fa1d3c146cd337b981e6c9a11

<小时/>

如果您使用 Data Loader 插件,则可以将相同的代码移至其 complete 中处理程序:

"dataLoader": {
"url": "data.php",
"complete": function( chart ) {
// iterate thorugh all graphs and check if they have
// fillColorsFunction set
for ( i = 0; i < chart.graphs.length; i++ ) {
var graph = chart.graphs[ i ];
if ( graph.fillColorsFunction !== undefined ) {
// iterate thorugh all of the data and add color
graph.fillColorsField = graph.valueField + "FillColor";
for ( var x = 0; x < chart.dataProvider.length; x++ ) {
var dp = chart.dataProvider[ x ];
dp[ graph.fillColorsField ] = graph.fillColorsFunction.call( this, dp[ graph.valueField ] );
}
}
}
}
}

关于javascript - AMcharts:根据值的范围设置 fillColors 字段的颜色,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/35993379/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com