组合图（面积和条形图） highchart答案

【问题标题】：combination chart (area and bar) highchart组合图（面积和条形图） highchart
【发布时间】：2017-11-06 06:46:58
【问题描述】：

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

我现在的图表 -> 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]
 }]
});

我想要的是像图片中所示的东西

【问题讨论】：

标签： javascript jquery graph charts highcharts

【解决方案1】：

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

你可以这样做。

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

你可以有关于任何轴的绘图带。

这是一个供您参考的 jsfiddle：http://jsfiddle.net/hhh2zx3w/7/

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

【讨论】：