ZingChart提供了一個豐富的API，用於通過重新繪制繪圖（重新加載）

，加載新數據（setseriesdata），修改現有圖表（modifyplot），

放大數據範圍（zoomto），切換各種交互功能（togglelegend）等等。

如何修改ZingChart圖表的方法：https://www.zingchart.com/docs/api/methods/

不刷新頁面修改圖表：

1. 第23行代碼中的newData不能加中括號，因為json返回的數據已經自帶中括號了，如果加上，圖表無法顯示。

json內容如下：

{"data":[100,156,160,128,145,158,162,153,178
 
,162,152,143,172,173,163,155,162,133,165,163,179,150,

140,165,148,165,168,180,168,153,167,142,184,217,210,158,193,154,163,229,242,224,198,190,223,

213,215,241,248,217,193,171,236,196,207,190,197,158,168,155]}

 1 $(‘#demo3‘).bind(‘click‘, function() {
 2         $.get( ‘test2_data.php‘, function() {})
 
 3         
 4         .done(function(res){
 5             
 6             var newData = res.data;
 7             zingchart.exec(‘demo-chart‘, ‘setdata‘, {
 8                 ‘data‘: {
 9                      "type":"line",
10                     "plot": {
11                     "tooltip": {
12                       "
 
text": "Orders: <strong style=‘font-size:11px;‘>%vt</strong> \n %kt"
13                     }
14                   },
15                   "scale-y": {
16                         "values":"<?php echo $sales_de_qty_max; ?>:<?php echo $sales_de_qty_min; ?>:10"
17                     },
18                     "title":{ "text":"test" },
19                     "subtitle":{ "text":"test" },
20                     "scale-x":{ "values":[<?php echo $test; ?>], "zooming":true,},
21                     "scroll-x":{  },
22                     "series":[ { "values": newData} ]
23                 }
24               });
25         });

2. 可以在html中添加按鈕的方式，在加上第1點中的javascript代碼實現數據的異步加載。

php文件的代碼如下：

<?php
    header(‘Content-type: text/json‘);
        $data = array (
        "data"  => array(12, 10, ...)
       
    );
        echo json_encode($data);

<button class=‘btn btn-info‘ id=‘demo3‘>Demo 3</button>

ZingChart 圖表插件