ハイチャート内のページ番号

Question

私のチャート（バー）にページ番号を付ける必要があります。私は表示することができるバーの数を制御することができます。誰もこれを早く試しましたか？

これが達成できれば、誰もがこれを整理するのを手伝ってください。

Answer 1

チャートの「データ」を変更する基本的な考え方は、チャートのシリーズ情報を更新することです。そのため、グラフのページ区切りボタンを押すと、系列データが直接更新されます。

以前私が答えた別の質問に基づいて簡単な例文をまとめました。

は、ここでそれをチェックアウト：http://jsfiddle.net/Robodude/EmMxH/71/

HTML：

<SELECT id="list"> 
<OPTION VALUE="A">Data Set A 
<OPTION VALUE="B">Data Set A + B 
<OPTION VALUE="C">Data Set A + B + C  
</SELECT> 
<button id="change">Change Data Source</button> 

<div id="container" style="height: 400px"></div> 

Javascriptを/ jQueryの：

var options = { 
    chart: { 
     renderTo: 'container', 
     defaultSeriesType: 'column' 
    }, 
    series: [] 
}; 

$("#change").click(function(){ 
if ($("#list").val() == "A") 
{ 
    options.series = [{name: 'A', data: [1,2,3,2,1]}] 
} 
else if ($("#list").val() == "B") 
{ 
    options.series = [{name: 'A', data: [1,2,3,2,1]},{name: 'B', data: [3,2,1,2,3]}] 
} 
else if ($("#list").val() == "C") 
{ 
    options.series = [{name: 'A', data: [1,2,3,2,1]},{name: 'B', data: [3,2,1,2,3]},{name: 'C', data: [1,1,1,1,1]}] 
} 


var chart = new Highcharts.Chart(options);  
}); 

これは私が答える助け前の質問である：明らかにReload chart data via JSON with Highcharts

を、これはかなり単純な例です。より多くの情報であなたの投稿を更新すれば、私はこれをさらに拡張することができます。

幸運:)

Answer 2

、あなたは前/次のページのパラメータそうではなく、それが実際のさわやかなチャートを更新する最初のページにズームインするaxis.setExtremesを利用することになり、これを行うために他の方法左右に動く。

Answer 3

特別なプラグイン、Jqueryページングプラグインを使用して、ハイチャートでのページネーションを簡単に行うことができます。

私が見つけたthisフォーラム情報の有益かつ有益です。

function pageselectCallback(page_index, jq){ 

var items_per_page = 3, 
    max_elem = 5, 
    from = page_index * items_per_page, 
    to = from + max_elem, 
    newcontent = '', 
    chartData = []; 

//pie.series[0].setData(data.slice(from,to)); 
if(typeof pie !== 'object') { 
    pie = new Highcharts.Chart({ 
     chart: { 
      renderTo: 'container', 
      type: 'column' 
     }, 
     series: [{ 
      data: [] 
     }] 
    });   
} 

pie.series[0].setData(data.slice(from, to)); 

// Prevent click eventpropagation 
return false; 
} 

と作業のデモがhereです。