Question

我有一个带有标记Y轴的图表，点数为1到100.除了有规则间隔的标签（0,10,20等）之外，我想为任意点添加标签，比如说47。这是否可以使用highcharts？

Answer 1

您可以使用plotLines选项为yAxis添加特定行。

yAxis: {
    plotLines: [{
        value: 47,
        color: 'rgb(216, 216, 216)',
        width: 1,
    }]
},

http://jsfiddle.net/nicholasduffy/wa6ukyyp/1/

修改

这看起来有点像黑客，但你可以伪造标签。

yAxis: { plotLines: [{ value: 47, color: 'rgb(216, 216, 216)', width: 1, label : { text: '47', x: -30, y: 2 } }] },

http://jsfiddle.net/nicholasduffy/wa6ukyyp/2/

Answer 2

根据您的评论，您可以使用tickPositioner功能添加自定义刻度，并使用此代码

$(function () {
    $('#container').highcharts({
        xAxis: {
            categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
        },
        yAxis: {
            tickInterval: 20, //sets the interval ticks
            tickPositioner: function(){
                var ticks = this.tickPositions; // gets the tick positions
                ticks.push(47); // adds the custom tick
                ticks.sort(function(a, b) {
                    return a - b; // sorts numerically the ticks 
                });
                return ticks; // returns the new ticks
            }
        },
        series: [{
            data: [29.9, 71.5, 86.4, 29.2, 44.0, 76.0, 93.5, 98.5, 16.4, 94.1, 95.6, 54.4]
        }]
    });
});

JSFiddle demo

Answer 3

我认为我发现最接近的解决方案是创建一条零厚度的线并标记该线：

    plotLines: [{
      value: cutoff,
      color: 'rgb(216, 216, 216)',
      width: 0,
      label: {
        text: 'label_name',
        style: {
          color: 'grey',
          fontweight: 'bold'
        }
      }
    }],

label_name非常靠近Y轴，它可以在不将工具提示放到图形上的情况下得到指示

使用Highcharts添加特定的Y轴标签

3 个答案: