當數據相同時，如何使繪圖線顯示在折線圖上？

Question

我正在嘗試向折線圖添加繪圖線。 當數據相同時，例如[7.0、7.0、7.0]，則不會顯示繪圖線。 但是，當數據上下時，繪圖線顯示為[7.0，8.0，7.0]。 當數據相同時，是否有辦法使繪圖線顯示？ JSFiddle

我的高級圖表設置為：

$(function () {
    $('#container').highcharts({
        title: {
            text: 'Monthly Average Temperature',
            x: -20 //center
        },
        subtitle: {
            text: 'Source: WorldClimate.com',
            x: -20
        },
        xAxis: {
            categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
                'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
        },
        yAxis: {
            title: {
                text: 'Temperature (°C)'
            },
            plotLines:[{
                    value:10,
                    color: '#ff0000',
                    width:2,
                    zIndex:4,
                    label:{text:'goal'}
                }]
        },
        tooltip: {
            valueSuffix: '°C'
        },
        legend: {
            layout: 'vertical',
            align: 'right',
            verticalAlign: 'middle',
            borderWidth: 0
        },
        series: [{
            name: 'Tokyo',
            data: [7.0, 7.0, 7.0, 7.0]
        }]
    });
});

Answer 1

您的問題與yAxis現在的外觀有關。 當數據的y值相同時，yAxis的最小值和最大值相同。 例如，如果您有數據：[7.0、7.0、7.0、7.0]，則yAxis的最小值和最大值等於7。

如果plotLine的值為：10，則無法在圖表中看到它。 要查看此plotLine，您可以手動設置yAxis的最小值和最大值：

yAxis: {
  min: 5,
  max: 10,
  title: {
    text: 'Temperature (°C)'
  },
  plotLines: [{
    value: 10,
    color: '#ff0000',
    width: 2,
    zIndex: 4,
    label: {
      text: 'goal'
    }
  }]
},

在這里您可以看到一個示例： http : //jsfiddle.net/g34pk5tc/3/

為了使yAxis中的極端值發生變化，更好的主意是添加帶有不可見點的序列，其中該點的y值將等於plotLine的值。 在這里，您可以看到一個示例，它如何工作：

function(chart) {
    chart.addSeries({
      showInLegend: false,
      enableMouseTracking: false,
      data: [10],
      marker: {
        enabled: false
      }
    })
  }

http://jsfiddle.net/g34pk5tc/4/