Question

我在页面上有4个图表

<div id="section">
    <div id="all" style="min-width: 400px;   height: 400px; margin: 0 auto"></div>
    <div id="top10" style="min-width: 400px; height: 400px; margin: 0 auto"></div>
    <div id="edu" style="min-width: 400px; height: 400px; margin: 0 auto"></div>
    <div id="eqp" style="min-width: 400px; height: 400px; margin: 0 auto"></div>
</div>

如何使用点击功能使用ajax更改数据？

$('#update').click(function() {     
    var date = $( '#datepicker' ).datepicker({ dateFormat: 'yyyy-mm-dd' }).val();
    $.getJSON("index.php/ajax",{start:date},function(data){
    $.each(data.top10, function(i) {
        // what here?
    });
    $.each(data.all, function(i) {
        // what here?
    });
    $.each(data.edu, function(i) {
        // what here?
    });
    });


});

例如data.top10是json string

{
    "top10": {
        "data": "147,139,97,89,63,51,44,41,41,28",
        "xlabel": "a, b, c, d, e, f, g, h, i, j"
    }
}

和＃top10看起来像这样

$('#top10').highcharts({
            chart: {
                type: 'column',
                margin: [ 50, 50, 100, 80]
            },
            title: {
                text: 'TOP10 reasons'
            },
            subtitle: {
                text: 'some subtitle text'
            },
            xAxis: {
                categories: [
                    'Tokyo',
                    'Jakarta',
                    'New York',
                    'Seoul',
                    'Manila',
                    'Mumbai',
                    'Sao Paulo',
                    'Mexico City',
                    'Dehli',
                    'Osaka',
                    'Cairo',
                    'Kolkata',
                    'Los Angeles',
                    'Shanghai',
                    'Moscow',
                    'Beijing',
                    'Buenos Aires',
                    'Guangzhou',
                    'Shenzhen',
                    'Istanbul'
                ],
                labels: {
                    rotation: -45,
                    align: 'right',
                    style: {
                        fontSize: '13px',
                        fontFamily: 'Verdana, sans-serif'
                    }
                }
            },
            yAxis: {
                min: 0,
                title: {
                    text: 'Population (millions)'
                }
            },
            legend: {
                enabled: false
            },
            tooltip: {
                formatter: function() {
                    return '<b>'+ this.x +'</b><br/>'+
                        'Population in 2008: '+ Highcharts.numberFormat(this.y, 1) +
                        ' millions';
                }
            },
            series: [{
                name: 'Population',
                data: top10_data,
                dataLabels: {
                    enabled: true,
                    rotation: -90,
                    color: '#FFFFFF',
                    align: 'right',
                    x: 4,
                    y: 10,
                    style: {
                        fontSize: '13px',
                        fontFamily: 'Verdana, sans-serif'
                    }
                }
            }]
        });

Answer 1

{
  "top10": {
    "data": "147,139,97,89,63,51,44,41,41,28",
    "xlabel": "a, b, c, d, e, f, g, h, i, j"
  }
}

与Highcharts不兼容，你能改变吗？

{
  "top10": {
    "data": [147,139,97,89,63,51,44,41,41,28],
    "xlabel": ['a', 'b', 'c', 'd','e', 'f', 'g', 'h', 'i', 'j']
  }
}

然后您的代码应如下所示：

$.getJSON("index.php/ajax",{start:date},function(data){
  var top = $('#top10').highcharts(),
      all = $('#all').highcharts();

  top.xAxis[0].setCategories(data.top10.xlabel, false);
  top.series[0].setData(data.top10.data);

  all.xAxis[0].setCategories(data.all.xlabel, false);
  all.series[0].setData(data.all.data);

});

Answer 2

在PHP中，您可以使用$data[] = "[0.3,0.4]";，然后在highcharts中使用join

series: [{
            color:'#185aa9',
            data: [<?php echo join($data, ',') ?>]
              }]

如果您不使用AJAX，在其他情况下您需要使用json_encode（）。

如何使用一个函数更新多个highcharts图表

2 个答案: