Question

我有条形图，我想在同一图表上绘制阴影区域，其最大和最小范围说是-1000k和-1250k，这很可能是区域范围图。我在高图文档中找不到示例，所以需要帮助。

我现在的图表 - ＆gt; http://jsfiddle.net/hhh2zx3w/6/

var c2chart3=Highcharts.chart("container1", {
    colors: ['rgb(90,198,140)','rgb(255,179,137)','rgb(246,151,159)','rgb(55,183,74)','rgb(169,99,169)','rgb(0,191,243)','rgb(223,200,24)','rgb(242,100,38)'],

    chart: {
        type: 'bar',
        backgroundColor: 'rgba(0,0,0,0.7)',
        style: {
          color: '#FFF',
          fontSize: '9px',
          fontFamily: 'MP'
        },
    },
    title: {
       text: ''
    },
    xAxis: {
       title: {
        text: null
       },
       gridLineWidth:0,
        lineWidth:0,
        tickWidth: 0,
        title: {
         text: ''
        },
        labels: {
         style: {
          color: '#FFF',
          fontSize: '9px',
          fontFamily: 'MP'
         },
        formatter: function(){
          return ""
        }
      },
    },
    yAxis: {
     // min: -2000000,
     // max: 1000000,
     gridLineColor: '#fff',
     gridLineWidth: 0,
     lineWidth:0,
     plotLines: [{
      color: '#fff',
      width: 1,
      value: 0
     }],
     title: {
      text: '',
      align: 'high'
     },
     title: {
       text: ''
     },
     labels: {
      style: {
        color: '#FFF',
        fontSize: '9px'
      },
   },
  },
  tooltip: { enabled: false },
  credits: { enabled: false },
  exporting: { enabled: false }, 
  plotOptions: {
   bar: {
    dataLabels: {
    enabled: true,
    style: {
      textOutline: false,
      color:'#fff',
     }
    }
   },
   series: {
    colorByPoint: true,
    pointWidth: 1,
    borderWidth:0,
    dataLabels: {
     enabled: true,
     formatter: function(){
    }
   }
  }
 },
 legend: { enabled: false },
 credits: { enabled: false },
 series: [{
    data: [-510362,-371233,-1593711,-388465,352395,179298,-1190969,-907204]
 }]
});

我想要的是图像

中显示的内容

Answer 1

您所指的功能在Highchart中被称为“Plot Bands”

以下是如何做到这一点。

plotBands: [{
    color: 'tomato',
    from: -1000000,
    to: -1250000
}],

你可以拥有相对于任何轴的绘图带。

以下是您的参考资料：http://jsfiddle.net/hhh2zx3w/7/

Highcharts API ref：https://api.highcharts.com/highcharts/yAxis.plotBands

组合图（区域和条形）高图

1 个答案: