是否可以在highchart.js库中自定义stack参数的功能

时间:2018-01-03 09:38:04

标签: javascript highcharts

我正在处理高图库的问题。在使用stacking ='normal'参数时,我得到了柱形图的堆积列。当两个输入的值相似时,我得到一个图形输出线堆叠在另一个上面。实际上我需要的是,当值相同而不是两者都叠在一起时,高图只能打印两个输入中的一个(重叠)。

示例:此处x1 = 2且x2 = 5。它将绘制x1和x2的所有倍数

理想输出: enter image description here

当前输出: enter image description here

请让我知道如何解决这个问题?当输入相同时,我不希望那些蓝线位于黑线上方。

列图中是否还有其他参数我应该看一下输入相同时的情况。我只想打印一条输出线(它与第二个输入重叠)。

这是针对以下问题的JS Fiddle示例:https://jsfiddle.net/pq82smmb/

<Trigger Property="UIElement.IsEnabled">
  <Setter Property="TextElement.Foreground">
    <Setter.Value>
      <SolidColorBrush>#FFADADAD</SolidColorBrush>
    </Setter.Value>
  </Setter>
  <Trigger.Value>
    <s:Boolean>False</s:Boolean>
  </Trigger.Value>
</Trigger>
 Highcharts.chart('container', {
        chart: {
            type: 'column'
        },
        xAxis: {
      },
        plotOptions: {
            series: {
                pointWidth: 2,
                stacking: 'normal',
                pointPlacement: 0
            }
        },
    
        series: [{
            data: [{"x": 0, "y": 0.8}, {"x": 2, "y": 0.8},{"x": 4, "y": 0.8}, {"x": 6, "y": 0.8}, {"x": 8, "y": 0.8}, {"x": 10, "y": 0.8}]
        
          }, {   
             data: [{"x": 0, "y": 0.8}, {"x": 5, "y": 0.8},{"x": 10, "y": 0.8}, {"x": 15, "y": 0.8}, {"x": 20, "y": 0.8}, {"x": 25, "y": 0.8}]
        }]
    });

1 个答案:

答案 0 :(得分:1)

我完全不使用stack属性解决了这个问题。相反,我使用了pointRange参数,它现在似乎正在工作。

JS小提琴:https://jsfiddle.net/pq82smmb/2/

 Highcharts.chart('container', {
    chart: {
        type: 'column'
    },
    xAxis: {
  },
    plotOptions: {
        series: {
            pointWidth: 2,
            pointRange: 0.05,
            //stacking: 'normal',
            pointPlacement: 0
        }
    },

    series: [{
        data: [{"x": 0, "y": 0.8}, {"x": 2, "y": 0.8},{"x": 4, "y": 0.8}, {"x": 6, "y": 0.8}, {"x": 8, "y": 0.8}, {"x": 10, "y": 0.8}]

      }, {   
         data: [{"x": 0, "y": 0.8}, {"x": 5, "y": 0.8},{"x": 10, "y": 0.8}, {"x": 15, "y": 0.8}, {"x": 20, "y": 0.8}, {"x": 25, "y": 0.8}]
    }]
});