ページに設定された JS 配列から積み上げ棒ハイチャートを作成しようとしています。各配列 (var として設定) を使用して、シリーズと x 軸のカテゴリをそれぞれ入力したいと考えています。
ここに私のデータがあります:
<script type="text/javascript">
var distroDates = [
{
name: 'exShortDate',
data: [
'06/2013',
'12/2012',
'06/2012',
'12/2011',
'06/2011',
'12/2010',
'06/2010',
'12/2009',
'06/2009',
'12/2008',
'06/2008',
'12/2007',
'12/2006',
'12/2005',
'12/2004',
'12/2003',
'12/2002',
]
},
{
name: 'exLongDate',
data: [
'06/25/2013',
'12/17/2012',
'06/20/2012',
'12/19/2011',
'06/21/2011',
'12/20/2010',
'06/21/2010',
'12/21/2009',
'06/22/2009',
'12/22/2008',
'06/23/2008',
'12/24/2007',
'12/21/2006',
'12/23/2005',
'12/23/2004',
'12/22/2003',
'12/23/2002',
]
},
{
name: 'Record Date',
data: [
'06/27/2013',
'12/19/2012',
'06/22/2012',
'12/21/2011',
'06/23/2011',
'12/22/2010',
'06/23/2010',
'12/23/2009',
'06/24/2009',
'12/24/2008',
'06/25/2008',
'12/27/2007',
'12/26/2006',
'12/28/2005',
'12/28/2004',
'12/24/2003',
'12/26/2002',
]
},
{
name: 'Payable Date',
data: [
'07/02/2013',
'12/24/2012',
'06/27/2012',
'12/29/2011',
'06/27/2011',
'12/30/2010',
'06/25/2010',
'12/31/2009',
'06/26/2009',
'12/31/2008',
'06/27/2008',
'01/04/2008',
'12/28/2006',
'12/30/2005',
'12/30/2004',
'01/02/2004',
'01/02/2003',
]
}
]
var distroData = [
{
name: 'Distro Income',
data: [
0.3908,
0.4948,
0.2311,
0.3342,
0.245,
0.2213,
0.19,
0.1404,
0.2014,
0.2266,
0.2131,
0.2328,
0.1288,
0.0044,
0.6248,
0,
0,
]
},
{
name: 'Distro StCapGain',
data: [
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
]
},
{
name: 'Distro LtCapGain',
data: [
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
]
},
{
name: 'Distro ReturnOnCapital',
data: [
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0.0202,
0,
0,
0,
]
}
]
</script>
ここに私のハイチャートオプションがあります:
renderStackColumnChart: function(distroDates, distroData, chartContainer) {
var stackColumnOptions={
chart: {
renderTo: chartContainer,
type: 'column',
width: 600
},
legend: {
enabled: true,
floating: false
},
plotOptions: {
column: {
stacking: 'normal'
},
series: {
showInLegend: true
}
},
series: distroData,
tooltip: {
backgroundColor: "#ffffff",
enabled: true,
formatter: false,
headerFormat: '<h5>{point.name}</h5>',
pointFormat: '<p>{point.y}</p>',
valueDecimals: 2,
valuePrefix: '$'
},
xAxis: {
categories: distroDates
},
yAxis: {
title: {
text: 'Total Distribution'
}
}
};
chartContainer.chart(stackColumnOptions);
}
exShortDate の値を x 軸に沿って表示したい。代わりに、4、5、6 などのインデックスを取得しているようです。さらに、x 軸に沿った最初の 4 つの値は「[Object]」です。[オブジェクト] [オブジェクト] [オブジェクト] [オブジェクト] 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16.
ツールチップに表示する「名前」の値を取得する方法も知りたいです。現在、「point.y」値のみを取得しています。「{point.name}」は逐語的に表示されます。
ありがとう。