Question

我正在尝试从我页面中设置的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轴的前四个值是“[对象]”。所以它看起来像：[Object] [Object] [Object] [Object] 4,5,6,7,8,9,10,11,12,13,14,15,16。

我还想知道如何获取工具提示中显示的“名称”值。现在我只得到“point.y”值; “{point.name}”逐字显示。

感谢。

Answer 1

exShortDate值是distroDates数组中的第一个元素。试试下面的代码。

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

Highcharts：使用JS数组填充系列和x轴类别

1 个答案: