highcharts - ズームタイプを動的に変更しますか？

Question

新しいインスタンスを作成せずにズームタイプを「x」から「xy」に変更したいのですが、update（）メソッドのように変更したいのです。myChart.options.chart.zoomType

Answer 1

あなたはこのようなことをすることができます：

var chart1 = new Highcharts.StockChart({
   chart: {
      zoomType: 'xy', //requried!
      ...
   }
   ...
});

function SwitchToZoomX() {
   chart1.pointer.zoomX = true;
   chart1.pointer.zoomY = false;
   chart1.pointer.zoomHor = true;
   chart1.pointer.zoomVert = false;
}

function SwitchToZoomY() {
   chart1.pointer.zoomY = true;
   chart1.pointer.zoomX = false;
   chart1.pointer.zoomVert = true;
   chart1.pointer.zoomHor = false;
}

Answer 2

Highcharts v5を使用すると、次のことができるようになります。

chart1.update({chart: {zoomType: "y"}})

このupdate関数は、chartoptionsを動的に更新して、zoomTypeレンダリング後を強制的に変更します。

Answer 3

まず、チャートに表示する文字列を準備します

クローンシリーズハイチャートとして再描画するには、描画後にnullに設定します。

var seriesClone=[{
        name: 'USD to EUR',
        data: [1,2,3,4,4,5,6,7,7,8,8,8,9,10,14]
   }]

設定するシリーズオプション

   var chartOptions={   

    chart: {
        renderTo:'container',
        zoomType: 'xy'
    },

    rangeSelector: {
        selected: 1
    },

    series: [{
        name: 'USD to EUR',
        data: [1,2,3,4,4,5,6,7,7,8,8,8,9,10,14]
    }]
                 }

 var chart = new Highcharts.StockChart(chartOptions);

また、ZoomTypeの値を変更する場合は、次のようにグラフを再宣言します。

   chartOptions.chart.zoomType='y';
   chartOptions.series=seriesClone;
   myChart=new Highcharts.StockChart(chartOptions); 

実例JSFIDDLE