如何使用我们自己的CSS设计yAxis情节线？

Question

我已经使用标签样式创建了一个普通的yAxis情节线。但是现在我想用一些CSS样式创建一个yAxis情节线。有什么建议？ 这是我到目前为止所尝试的 这是我的代码

var chart = $('#tv_chart_container').highcharts();
chart.yAxis[0].removePlotLine('hori_line');
                          data = chart.series[0].data;
  var test = data.length;
  var value = data[999].y;
  chart.yAxis[0].addPlotLine({
  value: value, // Value of where the line will appear
  width: 2 ,  
  color: '#248EC6',
  // dashStyle: 'dash',
  id: 'hori_line',
  label: {
    text: value,
    align: 'right',
    style: {
      color: '#FFFFFF',
      fontWeight: 'bold',

    }
  }

  });

以下是样本。我实际需要

Answer 1

我制定了一个概念验证，它非常贴近您的要求。这是使用Highcharts中的所有代码，而不是处理外部CSS的任何代码。

绘图线不能拥有您正在寻找的数据标签格式，因此我使用散点图系列作为线。另外，当您在折线图中移动新点时，这也会为您提供（默认）Highcharts动画。

我在这里做了一些事情：

1. 我将散点图线添加为单独的“虚拟”系列，用户将无法在图例中看到这些系列，也无法与之交互。
2. 我为散点图线的最后一个（第二个）点格式化了数据标签，以显示示例中的蓝色背景和白色数字。
3. 我在散点图线的最后（第二个）点上设置了一个带有菱形的标记。与数据标签设置一起，这将为您提供上面显示的标记示例。现在，数据标签有一个shape: 'callout'选项，但克拉只针对此类系列指向上或下。
4. 我更新了您的mouseOver事件以更新散点图线的值，而不是添加和删除绘图线。

这是概念证明小提琴：http://jsfiddle.net/brightmatrix/tzu3khp1/。您还可以在下面看到结果的屏幕截图。

我希望所有这些信息都对您有所帮助。请让我知道，如果你有任何问题;我很乐意将这个答案更新为详细说明。