Question

我正在使用HightCharts创建一些可视化。只考虑特定年份的思维系列我会自动在条形图的实际值和结果目标之间画一条线。

我以这种方式画线：

{
      dashStyle: 'dash',
      lineWidth: 2,
      shadow: false,
      zIndex: 2,
      color: '#000e3e',
      data: [[0, 5], [3,3]],
        name: 'Line for Project 2 - Results'

    }

在数据部分我指定从第0年开始，第0年是第3年，第3年是结果。

问题是，在HightCharts中，当一年有多个值时，该行不会从栏的顶部开始，而是从中间开始。

[！[在此处输入图像说明] [1]] [1]

有没有办法从栏顶部开始画线？

这是JS FIDDLE

Highcharts.chart('container', {
    title: {
        text: 'Combination chart'
    },
    xAxis: {
        categories: ['2014', '2015', '2016', 'Results']
    },
    series: [{
        type: 'column',
        name: 'Project 1',
        data: [10, 4, 1]
    }, {
        type: 'column',
        name: 'Project 2',
        data: [5, 4, 5]
    }, {
        type: 'column',
        name: 'Project 3',
        data: [2,8, 3]
    },{
      dashStyle: 'dash',
      lineWidth: 2,
      shadow: false,
      zIndex: 2,
      color: '#000e3e',
      data: [[0, 10], [3,5]],
    	name: 'Line for Project 1 - Results'
    
    },{
      dashStyle: 'dash',
      lineWidth: 2,
      shadow: false,
      zIndex: 2,
      color: '#000e3e',
      data: [[0, 5], [3,3]],
    	name: 'Line for Project 2 - Results'
    
    },{
      dashStyle: 'dash',
      lineWidth: 2,
      shadow: false,
      zIndex: 2,
      color: '#000e3e',
      data: [[0, 2], [3,0]],
    	name: 'Line for Project 3 - Results'
    
    }]
});

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/series-label.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>

<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>

Answer 1

实现所需效果的最简单方法是将线序列数据的 x 值设置为浮点数值，而不是整数，例如等于0.2或-0.2。请看下面的代码：

{
  dashStyle: 'dash',
  lineWidth: 2,
  shadow: false,
  zIndex: 2,
  color: '#000e3e',
  data: [[-0.2, 10], [3,5]],
    name: 'Line for Project 1 - Results'
}

我准备了JSFiddle example来向您展示它的外观。

祝你好运！

highcharts线未正确显示

1 个答案: