x軸の特定の点から動的なy軸を追加する方法

Question

x軸の特定の点から動的なy軸を追加する方法。

suppose my x-axis values are (jan,feb,march....dec) 

i want to generate y axis from Jun-dec (x-axis)。

とき、私はボタンをクリックしますが、そのがをY軸生成し、

代わり6月、12月の7月jan-から、x軸でを開始し、これまでjsfiddleあなたははっきりと私の問題を理解することができます参照してください。 。

var chart = Highcharts.chart('container', { 
 

 
    xAxis: { 
 
     categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'] 
 
    }, 
 

 
    yAxis: { 
 
     title: { 
 
      text: 'Temperature' 
 
     }, 
 
     lineWidth: 2, 
 
     lineColor: '#F33', 
 
     id: 'temperature-axis' 
 
    }, 
 

 
    series: [{ 
 
     name: 'Temperature', 
 
     data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6], 
 
     color: '#F33' 
 
    }] 
 
}); 
 

 
// the button handlera 
 
$('#add').click(function() { 
 
    chart.addAxis({ // Secondary yAxis 
 
     id: 'rainfall-axis', 
 
     title: { 
 
      text: 'Rainfall' 
 
     }, 
 
     lineWidth: 2, 
 
     lineColor: '#08F', 
 
     opposite: true 
 
    }); 
 
    chart.addSeries({ 
 
     name: 'Rainfall', 
 
     type: 'line', 
 
     color: '#08F', 
 
     yAxis: 'rainfall-axis', 
 
     data: [135.6, 148.5, 216.4, 194.1, 95.6, 54.4] 
 
    }); 
 
    $(this).attr('disabled', true); 
 
});

<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script> 
 
<script src="https://code.highcharts.com/highcharts.js"></script> 
 
<script src="https://code.highcharts.com/modules/exporting.js"></script> 
 

 
<div id="container" style="height: 400px"></div> 
 
<button id="add" class="autocompare">Add axis and series</button> 
 
<button id="remove" disabled="disabled" class="autocompare">Remove axis</button>

Answer 1

が

1>更新編曲によって解決することができる設定を追加しなければなりませんAY null値で

2>使用pointStartを開始する値がからの追加のパラメータを渡すためにxAxisカテゴリ

$('#add').click(function() { 
    chart.addAxis({ // Secondary yAxis 
     id: 'rainfall-axis', 
     title: { 
      text: 'Rainfall' 
     }, 
     lineWidth: 2, 
     lineColor: '#08F', 
     opposite: true 
    }); 
    chart.addSeries({ 
     name: 'Rainfall', 
     type: 'line', 
     color: '#08F', 
     yAxis: 'rainfall-axis', 
     data: [null,null,null,null,null,null,135.6, 148.5, 216.4, 194.1, 95.6, 54.4] //update with null values 
    }); 
    $(this).attr('disabled', true); 
}); 

Fiddleデモを一致させます。あなたが6月に1月からはデータがないか月間NULL値を使用する必要が

$('#add').click(function() { 
    chart.addAxis({ // Secondary yAxis 
     id: 'rainfall-axis', 
     title: { 
      text: 'Rainfall' 
     }, 
     lineWidth: 2, 
     lineColor: '#08F', 
     opposite: true 
    }); 
    chart.addSeries({ 
     name: 'Rainfall', 
     type: 'line', 
     color: '#08F', 
     yAxis: 'rainfall-axis', 
     pointStart: 6, //start point 
     data: [135.6, 148.5, 216.4, 194.1, 95.6, 54.4] 
    }); 
    $(this).attr('disabled', true); 
}); 

Fiddleデモ

Answer 2

あなたはあなたのデータへnullが問題の上

data: [null,null,null,null,null,null,135.6, 148.5, 216.4, 194.1, 95.6, 54.4] 

Fiddle