logo标签列表

Highcharts：如何在同一x轴上添加多条线

javascriptjquerycss
4
我正在使用highcharts创建具有多个轴的图形。我知道这没有意义，因为数据之间没有比较。但是我仍然需要这样做。

所以现在我想要的是橙色线通过条形图。我不希望它通过所有条形。相反，我希望橙色线只在各自的abc、qwe和xyz顶部穿过每个条形，并在底部结束。因此，基本上我想在同一x轴上有多条线。我不希望同一条线穿过所有条形。但每个条形都有自己的垂直线，只从条形的顶部边缘开始，到条形的底部边缘结束。

我该如何做？任何帮助将不胜感激。以下是我的代码。

1个回答
3
您可以将您的虚线系列分成三个虚线系列。然后，您可以使用x参数来设置轴上的值，以确定您的直线应该在哪里。例如，您可以设置
{
    name: 'Average',
    type: 'fakeLine',
    color: 'orange',
    dashStyle: 'shortdash',
    data: [{
      name: 'QWE',
      x: 0.84,
      y: 3000
    }, {
      name: 'QWE',
      x: 1.2,
      y: 3000
    }],
    stack: '',
    tooltip: {
      formatter: function() {
        return ' ' + this.point.name + ":" + this.point.y + '<br />'
      }
    },
  },

在您的中间列中，只有一条线从顶部到底部。

示例：https://jsfiddle.net/dto3Lt1f/3/

是的，谢谢，这正是我正在寻找的。但是由于我已将值分为两个值，一个用于顶部，一个用于底部。所以当我使用datalabel时，它也显示两个值，一个在顶部，一个在底部。如何隐藏一个值并仅在底部显示一个值。谢谢。 - Anonymous
@AkashKumar 您可以更改提示格式化程序，以仅显示底部点。要做到这一点，您可以为顶部点返回false，并为底部点返回普通字符串。 例如：https://jsfiddle.net/dto3Lt1f/4/ - Grzegorz Blachliński
嗨，谢谢你的所有帮助。我已经尝试过了。但是我想保持工具提示不变。我尝试并制作了底部系列，现在工具提示中为0值。还有一种方法可以隐藏这些0值吗？请检查我更新到问题中的新代码。 - Anonymous
@ Grzegorz Blachliński 你好，你提供的fiddle仍然在工具提示中显示底部值。我该如何隐藏工具提示中的底部值，并仅显示分割系列中的顶部值。我甚至尝试将底部值设置为0，并在工具提示的格式化程序中放置一个if条件来检查值是否为0，然后返回false，但这也没有起作用。你能帮忙吗？if(this.point.value == 0){ return false} - Anonymous
在更新后的代码中是否有任何方法可以检查底部值是否为0，如果是，则不显示工具提示。我尝试使用格式化程序来使用if条件，但它不起作用。 - Anonymous
您可以使用工具提示格式化程序来删除它。您可以检查您的点的索引，如果它等于1，则可以通过返回false来删除它。您还可以使用marker.states.hover.enabled = false来避免在悬停此点时显示工具提示。示例：http://jsfiddle.net/dto3Lt1f/7/ - Grzegorz Blachliński
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接