javascript - 在 meteor 中动态更新 Highcharts 系列

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>

图表.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