Question

在使用系列时，有没有人知道如何更改AM图表极坐标散点图上每个数据集的颜色？

我正在创建一个风速与方向图，我需要使用类别字段作为数字，以便我可以将值绘制为坐标。

我的图表工作正常，但我也希望根据读数的大小来更改每个数据系列的颜色。

我准备好了数据集，并且我希望将颜色用作系列中的第3个值。我只是无法弄清楚如何让AM Charts用不同的颜色加载每个值。

以下是我的图表代码：

var chart = AmCharts.makeChart("chartdiv", {
"type": "radar",
"theme": "light",
"dataProvider": [],
"valueAxes": [{
"gridType": "circles",
"minimum": 0
}],
"startDuration": 1,
"polarScatter": {
"minimum": 0,
"maximum": 3600,
"step": 1
},
"legend": {
"position": "right"
},
"graphs": [{
"title": "Wind Speed M/S Max",
"balloonText": "[[value]] m/s",
"bullet": "square",
"lineAlpha": 0,
"series": [[3011,4.1,'#000000'],
[434,2.3,'#080808'],
[656,2.5,'#101010'],
[2853,4.4,'#181818'],
[3192,4,'#202020'],
[3030,3.8,'#282828'],
[359,4.1,'#303030'],
[680,2.1,'#383838'],
[168,3.3,'#404040'],
[3362,3.1,'#484848'],
[3363,3.2,'#505050'],
[258,3.8,'#585858'],
[678,5.8,'#606060'],
[3447,6.7,'#686868'],
[3348,4.4,'#707070'],
[3424,5.1,'#787878'],
[2897,7.8,'#808080'],
[784,6.3,'#888888'],
[960,3.7,'#909090'],
[882,5.5,'#989898'],
[781,6,'#A0A0A0'],
[1215,4.7,'#A8A8A8'],
[1416,6,'#B0B0B0'],
[1490,4,'#B8B8B8']]
}]
});

由于

马特

Answer 1

此功能目前并不存在于Polar Scatter plugin中，但您可以对插件进行微小修改以添加此功能，如下所示：

// modified version of the polar scatter plugin that allows individual point coloring
AmCharts.addInitHandler( function( chart ) {

    // check if polar scatter is enabled
    if ( chart.polarScatter === undefined )
        return;

    // check if everything is set
    chart.categoryField = chart.categoryField || "angle";
    chart.polarScatter.minimum = chart.polarScatter.minimum || 0;
    chart.polarScatter.maximum = chart.polarScatter.maximum || 359;
    chart.polarScatter.step = chart.polarScatter.step || 1;

    // check if axisFrequency is set
    if ( chart.valueAxes === undefined )
        chart.valueAxes = [ {} ];

    if ( chart.valueAxes[ 0 ].axisFrequency === undefined )
        chart.valueAxes[ 0 ].axisFrequency = Math.ceil( ( chart.polarScatter.maximum - chart.polarScatter.minimum ) / 12 );

    // init empty data provider
    var data = [],
        dpoints = {};
    for ( var i = chart.polarScatter.minimum; i <= chart.polarScatter.maximum; i += chart.polarScatter.step ) {
        dpoints[ i ] = {};
        dpoints[ i ][ chart.categoryField ] = i;
        data.push( dpoints[ i ] );
    }

    for ( var g = 0; g < chart.graphs.length; g++ ) {
        var graph = chart.graphs[ g ];
        graph.valueField = graph.valueField || "value" + g;
        graph.colorField = graph.colorField || "color" + g; //add for setting colors per point
        if ( graph.series !== undefined ) {
            for ( var i = 0; i < graph.series.length; i++ ) {
                var dp = graph.series[ i ];
                if ( dpoints[ dp[ 0 ] ] !== undefined ) {
                    dpoints[ dp[ 0 ] ][ graph.valueField ] = dp[ 1 ];
                    if ( typeof dp[ 2 ] === "string" ) { //if the third element in the series contains a string, assign it to the color field
                        dpoints[ dp[  0 ] ][ graph.colorField ] = dp[ 2 ];
                    }
                }
            }
        }
    }

    // add data provider
    chart.dataProvider = data;

}, [ "radar" ] );

以下是使用图表代码和数据的demo。

Am Charts Polar Scatter

1 个答案: