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 min和max等于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/

当数据是相同的highcharts时，如何使折线显示在折线图上？

1 个答案: