highcharts - 使用 highcharts.js 绘制平行于 x 轴的水平线

Question

下面是帕累托图的 fiddle 。我想绘制一条平行于 x 轴的水平线，该线从左到右跨越并在 y 轴上的 80% 标记处结束。我想在绘制帕累托图时总是这样做。

你能告诉我是否有办法动态地做到这一点吗？

var chart = new Highcharts.Chart({
    chart: {
        renderTo: 'container',
        defaultSeriesType: 'column',
        borderWidth:1,
        borderColor:'#ccc',
        marginLeft:110,
        marginRight:50,
        //backgroundColor:'#eee',
        //plotBackgroundColor:'#fff',
    },
    title:{
        text:'Pareto Test 1'
    },
    legend:{
                                     
    },
    tooltip:{
        formatter:function(){
                if(this.series.name == 'Line'){
                    var pcnt = Highcharts.numberFormat((this.y / 415 * 100),0,'.');
                    return pcnt + '%';
                }
                return this.y;
            }
    },
    plotOptions: {
        series: {
            shadow:false,
        }
    },
    xAxis:{
        categories:['A','B','C','D','E','F','G','H'],
        lineColor:'#999',
        lineWidth:1,
        tickColor:'#666',
        tickLength:3,
        title:{
            text:'X Axis Title',
            style:{
                color:'#000'
            }
        
        }
    },
    yAxis:[{
        min:0,
        //endOnTick:false,
        //lineColor:'#999',
        lineWidth:1,
        //tickColor:'#666',
        //tickWidth:1,
        //tickLength:3,
        //gridLineColor:'#ddd',
       /* title:{
            text:'Y Axis Title',
            rotation:0,
            margin:50,
            style:{
                color:'#000'
            }
        }*/
    },{
        title:{text:''},
        //alignTicks:false,
        gridLineWidth:0,
        lineColor:'#999',
        lineWidth:1,
        tickColor:'#666',
        tickWidth:1,
        tickLength:3,
        tickInterval:415 / 20,
        endOnTick:false,
        opposite:true,
        linkedTo:0,
        labels:{
            formatter:function(){
                var pcnt = Highcharts.numberFormat((this.value / 415 * 100),0,'.');
                return pcnt + '%';
            }
        }        
    }],
    series: [{
        //yAxis:0,
        data: [115,75,60,55,45,30,20,15],
    },{
        type:'line',
        name:'Line',
        //yAxis:0,
        data: [115,190,250,305,350,380,400,415],
    }]
});

<script type="text/javascript" src="http://code.highcharts.com/highcharts.src.js"></script>
<div id="container" style="height: 400px"></div>

Answer 1

您可以按照计算 80% 的相同方式进行设置。请参阅下面的 fiddle 。下面是一些添加 plotLines 的示例代码:

plotLines: [{
            color: '#FF0000',
            width: 2,
            value: .80 * 415 // Need to set this probably as a var.
        }]

var chart = new Highcharts.Chart({
  chart: {
    renderTo: 'container',
    defaultSeriesType: 'column',
    borderWidth: 1,
    borderColor: '#ccc',
    marginLeft: 110,
    marginRight: 50,
    //backgroundColor:'#eee',
    //plotBackgroundColor:'#fff',
  },
  title: {
    text: 'Pareto Test 1'
  },
  legend: {

  },
  tooltip: {
    formatter: function() {
      if (this.series.name == 'Line') {
        var pcnt = Highcharts.numberFormat((this.y / 415 * 100), 0, '.');
        return pcnt + '%';
      }
      return this.y;
    }
  },
  plotOptions: {
    series: {
      shadow: false,
    }
  },
  xAxis: {
    categories: ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H'],
    lineColor: '#999',
    lineWidth: 1,
    tickColor: '#666',
    tickLength: 3,
    title: {
      text: 'X Axis Title',
      style: {
        color: '#000'
      }

    }
  },
  yAxis: [{
    min: 0,
    //endOnTick:false,
    //lineColor:'#999',
    lineWidth: 1
      //tickColor:'#666',
      //tickWidth:1,
      //tickLength:3,
      //gridLineColor:'#ddd',
      /* title:{
          text:'Y Axis Title',
          rotation:0,
          margin:50,
          style:{
              color:'#000'
          }
      }*/
  }, {
    title: {
      text: ''
    },
    //alignTicks:false,
    gridLineWidth: 0,
    lineColor: '#999',
    lineWidth: 1,
    tickColor: '#666',
    tickWidth: 1,
    tickLength: 3,
    tickInterval: 415 / 20,
    endOnTick: false,
    opposite: true,
    linkedTo: 0,
    labels: {
      formatter: function() {
        var pcnt = Highcharts.numberFormat((this.value / 415 * 100), 0, '.');
        return pcnt + '%';
      }
    },
    plotLines: [{
      color: '#FF0000',
      width: 2,
      value: .80 * 415 // Need to set this probably as a var.
    }]
  }],
  series: [{
    //yAxis:0,
    data: [115, 75, 60, 55, 45, 30, 20, 15]
  }, {
    type: 'line',
    name: 'Line',
    //yAxis:0,
    data: [115, 190, 250, 305, 350, 380, 400, 415]
  }]
});

<script type="text/javascript" src="http://code.highcharts.com/highcharts.src.js"></script>
<div id="container" style="height: 400px"></div>