我曾试图创建线图没有线在highchart。我正在寻找所需的结果如下图所示。我有两个主要问题。
1.点显示在对方的顶部，按照设计它应该平行。我可以调整，使他们在一条线，但不能容纳超过5-6点。因为数据将是动态的，它可以有其他系列的数据相同的值。
1.第二，蓝色的线上的季节是开箱即用，并触及中期的另一个赛季。如何解决这个问题。
我的代码在这里https://jsfiddle.net/mossawir/chn8u3L5/65/
Highcharts.chart('container', {
chart: {
},
title: {
text: ''
},
plotOptions: {
line: {
marker: {
symbol: 'circle',
// fillColor: 'blue',
radius: 5,
enabled: true
},
states: {
hover: {
enabled: false
}
}
}
},
xAxis: {
gridLineWidth: 1,
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
plotLines: [{
label: {
text: 'Winter', // Content of the label.
align: 'left', // Positioning of the label. Default to center.
x: +10, // Amount of pixels the labelrepositioned according to the alignment.
y: +20 ,
rotation: 0,
},
value: -0.5,
dashStyle: 'dash',
color: 'red',
zIndex: 9,
},{
label: {
text: 'Spring', // Content of the label.
align: 'left', // Positioning of the label. Default to center.
x: +10, // Amount of pixels the labelrepositioned according to the alignment.
y: +20 ,
rotation: 0,
},
value: 2.5,
dashStyle: 'dash',
color: 'red',
zIndex: 9,
},{
label: {
text: 'Summer', // Content of the label.
align: 'left', // Positioning of the label. Default to center.
x: +10, // Amount of pixels the labelrepositioned according to the alignment.
y: +20 ,
rotation: 0,
},
value: 5.5,
dashStyle: 'dash',
color: 'red',
zIndex: 9,
},{
label: {
text: 'Autom', // Content of the label.
align: 'left', // Positioning of the label. Default to center.
x: +10, // Amount of pixels the labelrepositioned according to the alignment.
y: +20 ,
rotation: 0,
},
value: 8.5,
dashStyle: 'dash',
color: 'red',
zIndex: 9,
}],
min: 0
},
yAxis: {
},
series: [{
data: [29.9, null, 130.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4],
lineWidth: 0,
color: 'green',
},
{
data: [29.9, 12, 137.4, 29.2, 144.0,null, 135.6, 135.6, null, 194.1, 95.6, 54.4],
lineWidth: 0,
color: 'red',
},
{
showInLegend: false,
data: [{
x: -1,
y: 180,
}, 180, 180, 180, 180],
color: 'blue',
dashStyle: 'solid',
lineWidth: 1,
pointPlacement: "on",
marker: {
enabled: false,
},
enableMouseTracking: false,
states: {
inactive: {
enabled: false
}
}
}]
});字符串
设计截图：x1c 0d1x
1条答案
按热度按时间xdnvmnnf1#
如果我理解正确的话，您在实现Highcharts时面临两个问题。
点在彼此之上：Highcharts按数据数组中提供的顺序绘制点。如果您有多个具有相同x值的点，（即，它们在x轴上属于同一类别），它们将被绘制在彼此的顶部。为了避免这种情况，您可以对同一类别中的点的x值引入一个小的偏移。但是，这可能不是理想的，如果你有超过5-6点。
线路开箱：线超出框外并接触另一个季节的中间部分的问题是由于您为plotLines设置的值。该值对应于绘制线的x值。如果您希望在两个类别之间的边界处绘制线，则应将该值设置为第二个类别的索引减去0.5。例如，如果你想在'Jan'和'Feb'之间画一条线，那么这个值应该是1 - 0.5 = 0.5。
以下是如何修改plotLines：
字符串