Jquery 使用按钮重新渲染图表_Jquery_Ajax

Jquery 使用按钮重新渲染图表

jquery ajax

Jquery 使用按钮重新渲染图表,jquery,ajax,Jquery,Ajax,我想知道我如何能有一个按钮，将重新呈现图表时，我点击它！这样我就不必每5分钟刷新一次 <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>Highstock Example</title> <script

我想知道我如何能有一个按钮，将重新呈现图表时，我点击它！这样我就不必每5分钟刷新一次

<!DOCTYPE HTML>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <title>Highstock Example</title>

        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
        <script type="text/javascript">
$(function() {
    var seriesOptions = [],
        yAxisOptions = [],
        seriesCounter = 0,
        names = ['MSFT', 'AAPL', 'GOOG'],
        colors = Highcharts.getOptions().colors;

    $.each(names, function(i, name) {

        $.getJSON('http://www.highcharts.com/samples/data/jsonp.php?filename='+ name.toLowerCase() +'-c.json&callback=?',   function(data) {

            seriesOptions[i] = {
                name: name,
                data: data
            };

            // As we're loading the data asynchronously, we don't know what order it will arrive. So
            // we keep a counter and create the chart when all the data is loaded.
            seriesCounter++;

            if (seriesCounter == names.length) {
                createChart();
            }
        });
    });



    // create the chart when all data is loaded
    function createChart() {

        $('#container').highcharts('StockChart', {
            chart: {
            },

            rangeSelector: {
                selected: 4
            },

            yAxis: {
                labels: {
                    formatter: function() {
                        return (this.value > 0 ? '+' : '') + this.value + '%';
                    }
                },
                plotLines: [{
                    value: 0,
                    width: 2,
                    color: 'silver'
                }]
            },

            plotOptions: {
                series: {
                    compare: 'percent'
                }
            },

            tooltip: {
                pointFormat: '<span style="color:{series.color}">{series.name}</span>: <b>{point.y}</b> ({point.change}%)<br/>',
                valueDecimals: 2
            },

            series: seriesOptions
        });
    }

});
        </script>
    </head>
    <body>
<script src="../../js/highstock.js"></script>
<script src="../../js/modules/exporting.js"></script>

<div id="container" style="height: 500px; min-width: 600px"></div>
    </body>
</html>


Highstock示例
$（函数（）{
var系列选项=[]，
yAxisOptions=[]，
序列计数器=0，
名称=['MSFT'、'AAPL'、'GOOG']，
colors=Highcharts.getOptions（）.colors；
$.each（名称、函数（i、名称）{
$.getJSON（'http://www.highcharts.com/samples/data/jsonp.php?filename=“+name.toLowerCase（）+”-c.json&callback=？”，函数（数据）{
系列选项[i]={
姓名:姓名,，
数据：数据
};
//当我们异步加载数据时，我们不知道数据的到达顺序
//我们保留一个计数器，并在加载所有数据时创建图表。
seriesconter++；
if（serieCounter==names.length）{
createChart（）；
}
});
});
//在加载所有数据时创建图表
函数createChart（）{
$（“#容器”）.highcharts（'StockChart'{
图表：{
},
范围选择器：{
选定：4
},
亚克斯：{
标签：{
格式化程序：函数（）{
返回（this.value>0？'+'：''）+this.value+'%；
}
},
绘图线：[{
值：0，
宽度：2，
颜色：“银色”
}]
},
打印选项：{
系列：{
比较：“百分比”
}
},
工具提示：{
pointFormat:“{series.name}:{point.y}（{point.change}%）
”，
数值小数：2
},
系列：系列选项
});
}
});

您只需获取Javascript代码的第一部分（基本上是

函数createChart（）

之上的所有内容），然后将其包装到如下命名函数中：

function refreshData() {
  ...
}

然后，您需要在某个地方添加对该函数的调用，否则在加载页面时不会执行该函数。添加以下调用，例如在脚本开头：

refreshData();

现在，您可以添加一个按钮，该按钮仅调用此新函数：

<button onclick="refreshData();">Refresh</button>

刷新

更改后，最初是否呈现图表？您是否查看了浏览器中的Javascript控制台以查看是否存在语法错误或其他问题？您还可以将

console.log（'refreshData（）called'）插入方法中

refreshData（）`以查看按钮是否与方法正确连接。