Question

我的网站上显示了一张图表。然后，查看者可以单击图表旁边的链接以更改图表数据。我的问题是初始化时数据不会显示在图表中 - 只有当你开始点击图表旁边的按钮时才会加载数据。我使用JSON将数据加载到图表中。我被告知问题可能是在首次显示图表后加载了JSON数据（异步问题），但我不知道如何解决这个问题。

下面是我用来将第一张图表（chartOptions.chart1）设置到＆＃34;容器＆＃34; DIV。这将初始化图表结构，但不会调用我的数据 - 数据只会显示我是否开始点击div-links。

$('chart').ready(function() {

    //common options
  Highcharts.setOptions({
    chart: {
      marginRight: 0
    },
    legend: {
      enabled: false
    },
    plotOptions: {
      bar: {
        pointPadding: .01
      },
      column: {
        borderWidth: 0.5
      },
      line: {
        lineWidth: 1
      },
    },
    series: [{
        color: '#027ff7',
        data: []
    }]
  });
      $('#container').highcharts(chartOptions.chart1);
      chart = $('#container').highcharts();

      $(document).on('click', '.chart-update', function() {
        $('div').removeClass('selected');
            $(this).addClass('selected');
            chart.destroy();
        $('#container').highcharts(chartOptions[$(this).data('chartName')]);
        chart = $('#container').highcharts();
      });
});
</script>
</head>
<body>

    <span class="wrapper">
        <span class="block chart"><div id="container" style="width:400px;height:300px;float:left;"></div></span>
        <span class="block buttons">
            <div id="divchart" class="chart-update selected" data-chart-name="chart1">Chart1</div>
            <div id="divchart" class="chart-update" data-chart-name="chart2">Chart2</div>
        </span>
    </span>
</body>

所以我想知道我是否可以使用其他东西而不是

    $('#container').highcharts(chartOptions.chart1);

为了在访问者首次进入网站时在container-div中初始化第一张图表？如果有一些javascript代码会自动触发on - ＆＃34;点击＆＃34;部分 - 因为这很好用。

初始化时图表为空

0 个答案: