在 Highcharts 中向 3d 柱形图添加线答案

【问题标题】：Add line to 3d column chart in Highcharts在 Highcharts 中向 3d 柱形图添加线
【发布时间】：2017-07-14 16:44:15
【问题描述】：

我正在使用 highcharts 在一个项目中制作一些数据图表，目前，它在 2D 中完美运行：

Chart working in 2D

这是每个月的一组百分比，用红线表示目标百分比，以便轻松可视化一组数据是否超过或低于该百分比。

现在的问题是，我正在尝试将其制作为 3D 以赋予它更多的“流行”效果，我包含 3D 库并启用它，但结果是这样的：

Chart NOT working in 3D

即使条形图按预期显示，线条也会混乱，并且离它应该在的位置不远。

我尝试从样条线更改为散点图，但没有成功。有没有人知道我该如何解决这个问题，或者可能有一种不同的方式来呈现这个“目标”，这样你就可以很容易地看到哪些栏在上面或下面。

提前致谢！

PS：这是我用于 3D 的 Highcharts 选项的 JSON：

{
  "chart": {
    "options3d": {
      "enabled": true,
      "alpha": 0,
      "beta": 0,
      "depth": 20
    }
  },
  "title": {
    "text": "Title"
  },
  "xAxis": {
    "categories": [
      "a",
      "b"
    ],
    "crosshair": false,
    "gridLineWidth": 1,
    "min": 0,
    "max": 1
  },
  "yAxis": {
    "floor": 98,
    "ceiling": 100,
    "title": {
      "text": "%"
    }
  },
  "plotOptions": {
    "column": {
      "pointPadding": 0.2,
      "borderWidth": 0
    },
    "scatter": {
      "width": 10,
      "height": 100,
      "depth": 10
    }
  },
  "series": [
    {
      "name": "ENERO",
      "type": "column",
      "data": [
        99.8,
        99.77
      ]
    },
    {
      "name": "FEBRERO",
      "type": "column",
      "data": [
        100,
        99.83
      ]
    },
    {
      "lineWidth": 1,
      "name": "Meta (99.8%)",
      "type": "scatter",
      "color": "#FF0000",
      "marker": {
        "enabled": false
      },
      "legend": {
        "enabled": false
      },
      "data": [
        [
          -1,
          99.8,
          2
        ],
        [
          2,
          99.8,
          2
        ]
      ]
    }
  ]
}

【问题讨论】：

折线图在 3d 中不完全支持，但如果你的目标只是画一条线，你可以使用 plotLines。演示：jsfiddle.net/v66zt28y
我已将此行为报告为错误。请参阅 github 问题跟踪器 - github.com/highcharts/highcharts/issues/6972
@SebastianBochan 非常感谢。如果您想将其作为解决方案发布以便我可以选择它，请这样做，因为我认为这是我最接近解决我的问题的方法（并且它可以满足我的需要）。再次感谢。
@morganfree 谢谢。我会关注它，看看是否有人回复。
@JoséColina 我在下面做了。

标签： javascript charts highcharts

【解决方案1】：

折线图在 3d 中不完全支持，但如果你的目标只是画一条线，你可以使用 plotLines。

"yAxis": {
    "plotLines":[{
       "value": 99.5,
       "width": 2,
       "color": 'red'
    }],
    "floor": 98,
    "ceiling": 100,
    "title": {
      "text": "%"
    }
},

演示：

http://jsfiddle.net/v66zt28y

【讨论】：