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

Question

以下是帕累托图表的小提琴。我想画一条平行于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％的方式设置此值。见下面的小提琴。下面是一些添加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>

Answer 2

你想看的是情节线：

http://api.highcharts.com/highcharts#yAxis.plotLines

{{编辑：

另外，请看这里略微改进的动态获取数据总和的方法： Highcharts percentage of total for simple bar chart