Javascript HighCharts：如何在多个轴上绘制一条直线，如具有不同值的固定X轴的绘制线

我在用海图做我的项目。我用了多个轴来绘制图表。我想要的是，在固定的x轴上应该有一条直线，即使有不同的值

---

我希望有一些类似于绘图线的东西，这些绘图线将是直的，固定在x轴上，但仍然显示不同的值。

我将创建单独的系列来实现这一点。我认为这是一个比使用渲染器更简单的解决方案。演示：

---

然而，我仍然怀疑这样的图表是否有用。我还建议审查这些要求

我将创建单独的系列来实现这一点。我认为这是一个比使用渲染器更简单的解决方案。演示：

---

---

然而，我仍然怀疑这样的图表是否有用。我还建议审查这些要求

所以。。。为什么不只用一条曲线呢？我看到这里有一条绘图线，但你把它设置为100000，在一个轴上，没有任何与它相关的数据，达到100000，所以它永远不会显示。这就引出了一个问题——如果这些条的比例都不同，那么一条绘图线可能会显示什么？图表已经没有意义了，因为条形图彼此没有关系。在它们之间划出一条完全任意划过的线也同样毫无意义，而只是假装有意义。FWIWI可以使用plotLine，但我希望它显示我传递给它的三个垂直设置的值。正如你看到的，我的另一条线的值是2000，30004000，我想保留这些值并显示它们，让这条线直接穿过图的中间。不管我用什么，我只需要让一条直线垂直穿过图表的中间，并显示这些值。你知道我该怎么做吗？同意@jlbiggs，如果你的轴值已知，你可以得到extreme.DataMax/2，并将其作为值放在绘图线中，因为你的值是随机的，这可能不是正确的解决方案。是的，我知道。但我仍然需要这样做。那么有没有办法做到这一点呢？只是让中间线垂直，保持这些值。有什么解决方案吗？@AkashKumar-如果你想在图表的“中间”绘制它，最好的方法是使用渲染器函数以像素值绘制线，而不是尝试通过绘制线或序列来导航复杂的三轴。参考：那么。。。为什么不只用一条曲线呢？我看到这里有一条绘图线，但你把它设置为100000，在一个轴上，没有任何与它相关的数据，达到100000，所以它永远不会显示。这就引出了一个问题——如果这些条的比例都不同，那么一条绘图线可能会显示什么？图表已经没有意义了，因为条形图彼此没有关系。在它们之间划出一条完全任意划过的线也同样毫无意义，而只是假装有意义。FWIWI可以使用plotLine，但我希望它显示我传递给它的三个垂直设置的值。正如你看到的，我的另一条线的值是2000，30004000，我想保留这些值并显示它们，让这条线直接穿过图的中间。不管我用什么，我只需要让一条直线垂直穿过图表的中间，并显示这些值。你知道我该怎么做吗？同意@jlbiggs，如果你的轴值已知，你可以得到extreme.DataMax/2，并将其作为值放在绘图线中，因为你的值是随机的，这可能不是正确的解决方案。是的，我知道。但我仍然需要这样做。那么有没有办法做到这一点呢？只是让中间线垂直，保持这些值。有什么解决方案吗？@AkashKumar-如果你想在图表的“中间”绘制它，最好的方法是使用渲染器函数以像素值绘制线，而不是尝试通过绘制线或序列来导航复杂的三轴。是的，太完美了！谢谢！只有几件事-1。图形现在被其他灰色线覆盖，如何隐藏它们。2.第三个值不显示在垂直线上。3.有没有办法增加那条线的长度。4.此外，由于这是一个多轴图形，我无法减小这三个条之间的间隙，我如何才能做到这一点？是的，我知道所有这些比较都没有意义。但这是我被赋予的任务，我必须去做。因此，我非常感谢您的帮助。1）删除

plotBorderWidth

。2） 设置

dataLabels.allowOverlap

为true 3）为您的线系列设置

x

值，为xAxis设置最小值+最大值4）更改

点宽度

。查看所有更改的演示：您好，先生，谢谢您的帮助。您提到的一切都非常好。但是pointWidth只是使列的宽度变小了，但是它们之间的差距仍然很大。我怎样才能减少这些。点填充或组填充也不起作用。

pointPadding

和

groupPadding

不起作用，因为您已经固定了

pointWidth

。您可以删除该选项。无论如何，对我来说，

pointWidth

工作正常，请参见：-不要忘记增加

pointWidth

；）是的，太完美了！谢谢！只有几件事-1。图形现在被其他灰色线覆盖，如何隐藏它们。2.第三个值不显示在垂直线上。3.有没有办法增加那条线的长度。4.此外，由于这是一个多轴图形，我无法减小这三个条之间的间隙，我如何才能做到这一点？是的，我知道所有这些比较都没有意义。但这是我被赋予的任务，我必须去做。因此，我非常感谢您的帮助。1）删除

plotBorderWidth

。2） 设置

dataLabels.all
(function(H) {
  var seriesTypes = H.seriesTypes;

  seriesTypes.fakeLine = Highcharts.extendClass(seriesTypes.line);

  seriesTypes.fakeLine.prototype.translate = function() {
    var s = this;

    seriesTypes.line.prototype.translate.call(s);

    H.each(s.points, function(point) {
        point.plotY = s.chart.plotWidth / 2; // display in the middle - note: plotWidth, not plotHeight, because chart is inverted
    });
  }
})(Highcharts);