gpt4 book ai didi

javascript - Highcharts 线未正确显示

转载 作者:行者123 更新时间:2023-12-01 05:18:00 24 4
gpt4 key购买 nike

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

我这样画线:

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

}

在数据部分,我指定从第 0 列(第一年)和第 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>

最佳答案

实现所需效果的最简单方法是将线系列数据的 x 值设置为 float ,而不是整数,例如等于 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向您展示它的外观。

最诚挚的问候!

关于javascript - Highcharts 线未正确显示,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/47710951/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com