全宽区域范围

时间:2015-05-27 09:27:11

标签: javascript highcharts

使用分类变量时,可以扩展arearange系列以填充x轴的整个宽度吗?

$(function() {

  var min = 80,
    max = 100;

  new Highcharts.Chart({
    chart: {
      renderTo: 'chart'
    },
    credits: {
      enabled: false
    },
    legend: {
      enabled: false
    },
    title: {
      text: ''
    },
    yAxis: {
      min: 0,
      max: 100,
      title: {
        text: ''
      }
    },
    xAxis: {
      type: 'category'
    },
    series: [{
      lineWidth: 0,
      data: [
        ['a', 89],
        ['b', 95],
        ['c', 73]
      ]
    }, {
      data: [
        ['a', min, max],
        ['b', min, max],
        ['c', min, max]
      ],
      type: 'arearange',
      enableMouseTracking: false,
      lineWidth: 0,
      linkedTo: ':previous',
      color: '#00a65a',
      fillOpacity: 0.3,
      zIndex: 0
    }]

  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/highcharts-more.js"></script>
<div id="chart"></div>

1 个答案:

答案 0 :(得分:1)

您可以管理区域范围系列的x值:

        data: [
            [-0.5, min, max], // 0 = index for the first category, so start before
            [2.5, min, max] // 2 = index for the last category, so end after
        ],

现在只需为xAxis设置minmax

    xAxis: {
        type: 'category',
        min: 0,
        max: 2
    },

工作演示:http://jsfiddle.net/1hddt3vc/3/