Am Charts Polar Scatter

Question

シリーズを使用しているときにAM Charts polar scatter graph上の各データセットの色を変更する方法を知っている人はいますか？

私は風速vs方向グラフを作成しています。私は値を座標としてプロットできるように、カテゴリフィールドを数値として使用する必要があります。

私のグラフは機能していますが、各データシリーズの色を読み方の年数に応じて変更したいと考えています。

データセットの準備ができていて、シリーズの3番目の値として使用したい色です。私はちょうど別の色で各値をロードするAMチャートを取得する方法を解決できません。

以下

は、グラフのための私のコードです：

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があります。