在點擊按鈕上更新圖表

我正在通過閱讀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>

當我點擊按鈕如何更新圖表與下一個數據集文件夾？

來源

2015-10-12 logicstar

粘貼你的確切json在這裏。 –

更新按您的評論：

$(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); 
    }) 
}

來源

2015-10-12 12:16:42

但data20.json是手動讀取文件。我想讀下一個文件。如果我點擊按鈕數據（id + 10）.json文件應該被讀取。 – logicstar

@logicstar看到我更新的答案和這個小提琴http://jsfiddle.net/Nishith/ta2pLb3v/3/ –

Chatruvedi對不起，我看不到你的例子中的任何輸出。 – logicstar

在點擊按鈕上更新圖表

回答

相關問題