2016-03-29 9 views
0

高チャートを使用してグラフをプロットしようとしています。フラグの値に基づいて色を変更する必要があります。ハイチャートの値に基づいて動的な色を変更する方法

私はこれを使用しようとしましたが、ポイントだけがフラグに基づいて変更されていますが、私はラインの色を取得していません。

ここは私のコードです。

$(function() { 
var getColor = {'g' : '#008000', 
      'r' : '#FF0000', 
      'b' : '#000000'}; 
$('#container').highcharts({ 
    title: { 
     text: 'Monthly Average Temperature', 
     x: -20 //center 
    }, 
    subtitle: { 
     text: 'Source: WorldClimate.com', 
     x: -20 
    }, 
    xAxis: { 
     categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 
      'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'] 
    }, 
    yAxis: { 
     title: { 
      text: 'Temperature (°C)' 
     }, 
     plotLines: [{ 
      value: 0, 
      width: 1, 
      color: '#808080' 
     }] 
    }, 
    tooltip: { 
     valueSuffix: '°C' 
    }, 
    legend: { 
     layout: 'vertical', 
     align: 'right', 
     verticalAlign: 'middle', 
     borderWidth: 0 
    }, series: [{ 
     name: 'London', 
     data: [{y:3.9,flag:0,color:'#000000'},{y:4.2,flag:0,color:'#000000'},{y:5.7,flag:1,color:'#008000'},{y:8.5,flag:0,color:'#000000'},{y:11.9,flag:0,color:'#000000'},{y:15.2,flag:0,color:'#000000'},{y:17.0,flag:0,color:'#000000'},{y:16.6,flag:0,color:'#000000'},{y:14.2,flag:2,color:'#ff0000'},{y:10.3,flag:0,color:'#000000'},{y:6.6,flag:1,color:'#008000'},{y:4.8,flag:2,color:'#ff0000'}] 
    }] 
}/*,function(chart){ 
$.each(chart.series[0].data,function(i,data){ 

    if(data.flag == 0){ 
    console.log('green'); 
    color : getColor['g']} 
    if(data.flag ==1){ 
    console.log('black'); 
    color : getColor['b']} 
    if(data.flag == 2){ 
    console.log('red'); 
    color : getColor['r']} 
    }); 

}*/); 
}); 

私を助けてください。ポイントと一緒に着色されたラインを取得する必要があります。私は間違っているmを取得していない、plzzzzは私を助けます。

+0

フラグを使用するのと同じ方法で色を使用する必要があります。 'color'の代わりに' data.color = someColor' –

+0

フラグolyに基づいて色を変更する必要があります。しかし、私はオリーの点が色付けされていますが、線ではありません – suma

+0

Ouuu、申し訳ありません。あなたはどの色をしたいですか?緑色の点が赤色の点に接続されている場合、それらを接続する線の色は何ですか? –

答えて

3

あなたは、例えば、Multicolor series pluginを使用することができます。http://jsfiddle.net/sz0esszz/11/

は単にcoloredline直列の種類を変更しsegmentColor設定点の各々について、現在の点と次の点との間の線の色を定義します。

+0

私が見る色はシリーズのデフォルト色です。シリーズカラーの代わりにポイントカラーを表示するにはどうしたらいいですか? –

+0

['marker.states.hover.fillColor'](http://api.highcharts.com/highcharts#plotOptions.series.marker.states.hover.fillColor)を使用してください。最初のポイントを参照してください:http://jsfiddle.net/sz0esszz/13/ –

+0

シリーズの各ポイントのマーカーオブジェクトを定義することなく、ポイントカラーを塗りつぶしカラーとして使用するようにハイチャートに指示する方法はありますか? –

関連する問題