上午图表极地散点图

Question

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

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

我的图表正在运行，但我还想根据读数的年龄更改每个数据系列的颜色。

我已经准备好我的数据集和我想用作系列中第三个值的颜色。我只是不知道如何让 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。