各月の期間の列の色を設定するハイチャート

Question

私はチャートで解決する最後の問題が1つあります。私は年の各月の可変数の列を持っています。私がしようとしているのは、各列に設定された色を割り当てることです。私は成功していないので、多くの方法を読んで、試しました。

マイコード。

$(function() { 

var colors = ['#999999', '#009900', '#FF6600', '#CC0000', '#FF0000'], 
colorIterator = 0; 
var chart; 
$(document).ready(function() { 
$.getJSON("../charts/1-2-4-overall_year_chart.php", function(json) { 
chart = new Highcharts.Chart({ 
chart: { 
renderTo: 'container1', 
type: 'column', 
marginRight: 130, 
marginBottom: 25, 

events:{ 
load:function() { 
var chart = this, 
series = chart.series, 
each = Highcharts.each; 

each(series, function(serie, i) { 
each(serie.data, function(data, j) { 
data.update({ 
color: colors[colorIterator] 
},false); 
colorIterator++; 
}); 
}); 

chart.redraw(); 
} 
} 
}, 

title: { 
text: 'Monthly trend', 
x: -20 //center 
}, 

subtitle: { 
text: '', 
x: -20 
}, 

xAxis: { 
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'] 
}, 

yAxis: { 
endOnTick: false, 
max:11, 
showFirstLabel: false, 
lineColor:'#999', 
lineWidth:1, 
tickColor:'#666', 
tickWidth:1, 
tickLength:2, 
tickInterval: 10, 
gridLineColor:'#ddd', 
title: { 
text: 'Count', 
style: { 
fontFamily: 'Tahoma', 
color: '#000000', 
fontWeight: 'bold', 
fontSize: '8px' 
} 
}, 
zIndex: 10, 
label: { 
text: 'Maximum %', 
align: 'center', 
x: -10, 
y: -10, 
style: { 
color: '#FF0000' 
} 
} 
}, 


credits: { 
enabled: false 
}, 

tooltip: { 
formatter: function() { 
return '<b>'+ this.series.name +'</b><br/>'+ 
this.x +': '+ this.y; 
} 
}, 

legend: { 
layout: 'vertical', 
align: 'right', 
verticalAlign: 'top', 
x: -10, 
y: 100, 
borderWidth: 1 
}, 



plotOptions: { 
column: { 
colorByPoint: true 
}, 


series: { 
cursor: 'pointer', 
pointWidth: 6, 
point: { 
events: { 
//click: function() { 
//location.href = "feedback-items_detractors_iframe.php?FromDate1=<?php echo $StartDate;?>&ToDate1=<?php echo $EndDate;?> target='iframe2'"; 
//} 
} 
}, 
legendIndex:0, 

dataLabels: { 
enabled: true, 
color: '#000000', 
align: 'center', 
cursor: 'pointer', 
borderRadius: 5, 
backgroundColor: 'rgba(252, 255, 255, 255)', 
borderWidth: 1, 
borderColor: '#AAA', 
y: -6, 
format: '{y:.1f}', // one decimal 
y: -20, // 10 pixels down from the top 
style: { 
textShadow: false, 
fontSize: '8px', 
fontFamily: 'Verdana, sans-serif' 
} 
} 
} 

}, 



series: json, 

}); 
}); 

}); 

$('#resizer').resizable({ 
// On resize, set the chart size to that of the 
// resizer minus padding. If your chart has a lot of data or other 
// content, the redrawing might be slow. In that case, we recommend 
// that you use the 'stop' event instead of 'resize'. 
resize: function() { 
chart.setSize(
this.offsetWidth - 20, 
this.offsetHeight - 20, 
false 
); 
} 
}); 

}); 

これは、私は誰もこれが、それは非常に参考になるどのように行われるか任意のアイデアを持っている場合

をやろうとしていますものです。

ありがとうございます。

Answer 1

だけの色を使用することによって、問題を解決：[ '＃333333'、 '＃009900'、 '＃のFF6600'、 '＃のCC0000'、 '＃1 FF0000']、 plotOptions：{列：{colorByPoint：false}、

Answer 2

colorByPointオプションをtrueに設定し、必要なカラーシーケンスを設定します。

options = { 
    chart: {...}, 
    plotOptions: { 
     column: { 
      colorByPoint: true 
     } 
    }, 
    colors: [ 
     // set colors 
    ] 
} 

例フィドル：http://jsfiddle.net/gh/get/library/pure/highcharts/highcharts/tree/master/samples/highcharts/plotoptions/column-colorbypoint-true/