Question

我正在尝试根据用户的选择设置一个包含单个图表和两个系列的页面。基本上，一页，一个图表，两个选项代表要显示的数据。

当我需要访问图表的系列数组时，我陷入困境。

这是我的简化示例：

chart.html

<template name="ChartWithDifferentSeries">

    <div class="panel panel-default">
        <div class="panel-heading">Example</div>
        <div class="panel-body">
            <div class="btn-group btn-group-justified">
                <a href="#" class="displaySerie1 btn btn-default">Serie 1</a>
                <a href="#" class="displaySerie2 btn btn-default">Serie 2</a>
            </div>
            {{> highchartsHelper chartId="chart" chartWidth="100%" charHeight="100%" chartObject=chartMultiSeries}}
        </div>
    </div>

</template>

chart.js之

var serie1 = [['share 1',25],['share 2',75]];
var serie2 = [['share 1',10],['share 2',30],['share 3',60]];

var serieToDisplay= 1;

function buildData(){
    return serieToDisplay === 1?serie1:serie2;
}

Template.ChartWithDifferentSeries.helpers({
    chartMultiSeries: function () {
        return {
            series: [{
                type: 'pie',
                data: buildData()
            }]
        };
    }
})

Template.ChartWithDifferentSeries.events({
    "click .displaySerie1": function () {
        serieToDisplay=1;
        var series = chart.highcharts().series[0];
        series.setData(buildData());
    },
    "click .displaySerie2": function () {
        serieToDisplay=2;
        var series = chart.highcharts().series[0];
        series.setData(buildData());
    }
})

注意：我正在使用MaazAli / Meteor-HighCharts包装器。也许这就是让我感到困惑的原因。

此时控制台错误：highcharts（）不是函数。

错误修正

我改变了

chart.highcharts().series[0]

通过

$('#chart').highcharts().series[0]

现在好了。我仍然想知道我是否尊重最佳做法......

Answer 1

如错误所示，charts.highcharts（）不是函数。像这样访问它：

chart.series[0].data

动态更新流星中的高图系列

错误修正

1 个答案: