Question

我正在通过读取tmp文件夹中的json文件来绘制一个图。以下是tmp目录结构。

TMP

data10
data20
data30
.........
........
........
data100

代码：

Follwing代码从tmp文件夹中读取文件，并使用highchart生成图表。

<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <title> - jsFiddle demo</title>


  <script type='text/javascript' src='http://code.jquery.com/jquery-1.9.1.js'></script>




  <link rel="stylesheet" type="text/css" href="/css/result-light.css">

  <style type='text/css'>

  </style>




<script type='text/javascript'>
$(function () {

 var options = {
        chart :{
                  type: 'polygon',
                  renderTo: 'container',
                  zoomType:'x'

        },
        title: {
            text: ''
        },
        yAxis: {
            title: false,
            gridLineWidth:0,
            lineWidth:0,
            labels:{
                enabled: false
            }
        },

        xAxis: {
            title: false,
            gridLineWidth:0,
            lineWidth:0,
            labels:{
                enabled: false
            }
        },
         plotOptions: {
            series: {
                lineWidth: 1,
                lineColor:'black'
            }
        }, 
        series: []
    };

    $.getJSON('data20.json', function(data) {
        options.series=data;
        var chart = new Highcharts.Chart(options);
    })
    $.getJSON('tmp/title.json', function(title) {
        options.title.text=title;
        var chart = new Highcharts.Chart(options);
    })

});

function forward() {
    //$('#plots-tabs-heatmap').load();       // update with dataset data10.json
}

function backward()
{
   $('#plots-tabs-heatmap').load();           // update with dataset data30.json
}

</script>

</head>
<body>
<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/highcharts-more.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>

<div id="container" style="min-width: 310px; height: 400px; max-width: 600px; margin: 0 auto"></div>
<br>
<br>
<table>
<tr><td>
<img name="jsbutton" src="snipa/zoom-in.svg" width="110" height="28" border="0" alt="javascript button" onclick="forward();">
</td>
<td>
<img name="jsbutton" src="snipa/zoom-out.svg" width="110" height="28" border="0" alt="javascript button" onclick="backward();">
</td>
</tr>
</table>
</body>

当我点击按钮时如何用文件夹中的下一个数据集更新图表？

Answer 1

更新根据您的评论：

 $(function () {
var chart;

var options = {
    chart :{
              type: 'polygon',
              renderTo: 'container',
              //zoomType:'x'

    },
    title: {
        text: ''
    },
    yAxis: {
        title: false,
        gridLineWidth:0,
        lineWidth:0,
        labels:{
            enabled: false
        }
    },

    xAxis: {
        title: false,
        gridLineWidth:0,
        lineWidth:0,
        labels:{
            enabled: false
        }
    },
     plotOptions: {
        series: {
            lineWidth: 1,
            lineColor:'black'
        }
    },  
    series: [{}]
};
  $.getJSON('data10.json', function(data) {
    options.series=data;
     chart = new Highcharts.Chart(options);
});

 var i = 10;
    $("#plus").click(function(){
i+= 10;
if(i >100) return false;
   $.getJSON('data'+i+'.json', function(data) {
     options.series=data;  
     chart = new Highcharts.Chart(options);

  });
 });
$("#minus").click(function(){
i-= 10;
if(i <10) return false;
    $.getJSON('data'+i+'.json', function(data) {
    options.series=data;
     chart = new Highcharts.Chart(options);
  });
  }); 

   });

参见fiddle here calling next/prev json files 当i = 0时你必须禁用向后点击，请看上面的小提琴。

旧答案：特定于highcharts 将id设置为后退和前进按钮并使用：

 $('#forward').click(function() {
  $.getJSON('data20.json', function(data) {
    chart.series[0].setData(data);
 });
 });

或者这样做：

使图表变量全局

var chart;

在前进/后退按钮内点击json：

function forward() {
$.getJSON('data20.json', function(data) {
    options.series=data;
    var chart = new Highcharts.Chart(options);
  })
 }

单击按钮更新图表

1 个答案: