Highcharts：使用JS數組來填充系列和x軸類別

我想從我的頁面中設置的JS數組填充一個堆疊的酒吧高圖。我想使用每個數組（設置爲var）分別填充系列和x軸類別。Highcharts：使用JS數組來填充系列和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>

，這裏是我的highcharts選擇：

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軸的前四個值是「[Object]」。所以它看起來像：[Object] [Object] [Object] [Object] 4,5,6,7,8,9,10,11,12,13,14,15,16。

我想還想知道如何獲取「名稱」值以顯示在工具提示中。現在我只能得到「point.y」的值; 「{point.name}」逐字顯示。

謝謝。

來源

2013-07-30 dylanmac

什麼是錯誤？什麼不行？ –

你的代碼中沒有point.name，只有series.name。 –

exShortDate數值是distroDates數組中的第一個元素。嘗試下面的代碼。

xAxis: { 
    categories: distroDates[0].data 
},

來源

2013-07-31 05:54:09 yavuz

太棒了。非常感謝。作爲後續，任何想法如何在工具提示中顯示相應的日期？默認的工具提示顯示系列數據。 – dylanmac

附加一個函數來格式化工具提示的屬性，並顯示任何你想要的。 http://api.highcharts.com/highcharts#tooltip.formatter – yavuz

Highcharts：使用JS數組來填充系列和x軸類別

回答

相關問題