时间戳

首页 > 解决方案 > Highcharts yAxis 绘图线未显示在“折线”图表类型上

highcharts - Highcharts yAxis 绘图线未显示在“折线”图表类型上

问题描述

我正在使用 Highcharts，但无法弄清楚为什么我的 yAxis 绘图线对于柱形图和面积图显示得很好，但对于折线图（或样条图）却不行。

这是一个 JSFiddle 来演示这个问题——它们之间的唯一区别是图表类型：

https://jsfiddle.net/x9hLmp5v/

检查折线图的 svg，您会发现 plotlines 的路径未设置（请向右滚动以查看值）：

<g class="highcharts-plot-lines-5" data-z-index="5">
  <path fill="none" class="highcharts-plot-line " stroke="#FF0000" stroke-width="2" stroke-dasharray="16,6"></path>
  <path fill="none" class="highcharts-plot-line " stroke="green" stroke-width="10" stroke-dasharray="10,30"></path>
</g>

而对于其他两种图表类型它们是正常的：

<g class="highcharts-plot-lines-5" data-z-index="5">
  <path fill="none" class="highcharts-plot-line " stroke="#FF0000" stroke-width="2" stroke-dasharray="16,6" d="M 78 225 L 606 225"></path>
  <path fill="none" class="highcharts-plot-line " stroke="green" stroke-width="10" stroke-dasharray="10,30" d="M 78 272 L 606 272"></path>
</g>

我错过了什么？

标签： highcharts

解决方案

请注意，柱形图将列从 0 渲染到设定值，同时，线系列渲染点作为设定值，并且 yAxis 范围与柱状图不同，因此您的情况下的 plotLine 值超出了 yAxis 范围线系列。

您可以更改yAxis.min值以更改此范围并查看plotLines.

演示：https ://jsfiddle.net/BlackLabel/957c4jmk/

  "yAxis": {
    "title": {},
    "type": "linear",
    "startOnTick": false,
    "endOnTick": false,
    "min": 0,
    "max": null,
    "plotLines": [
      {
        "color": "#FF0000",
        "dashStyle": "LongDash",
        "width": 2,
        "value": 1200,
        "zIndex": 5
      },
      {
        "color": "green",
        "dashStyle": "Dot",
        "width": 10,
        "value": 800,
        "zIndex": 5
      }
    ]
  },

推荐阅读