Обновление диаграммы при нажатии кнопки

Я рисую один сюжет, читая json-файл в папке tmp. Ниже приведена структура каталогов 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 здесь. –

Update Согласно Ваш комментарий:

$(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 Вы должны отключить назад нажмите когда я = 0, см скрипку выше.

Старый Ответ: специфичные для Highcharts Либо установить идентификатор к вашей спине и кнопки вперед и использования:

$('#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

Обновление диаграммы при нажатии кнопки

ответ

Смежные вопросы