如何在highcharts数据系列中添加填充颜色 [英] How to add fill color in highcharts data series
本文介绍了如何在highcharts数据系列中添加填充颜色的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我需要根据代码中的变量(左,右,中)动态填充数据序列的颜色。
I need to fill the color of data series dynamically based on the variable ( left , right , center ) from my code.
我附上了我的代码和预期输出:
I have attached my code and expected output:
$(document).ready(function() {
var left = [
[4, 7],
[9, 2]
];
var right = [
[2, 2],
[9, 9]
];
var center = [
[4,5.5],
[10,5.5]
];
Highcharts.chart('container', {
chart: {
events: {
load: function () {
const xAxis = this.xAxis[0]
const yAxis = this.yAxis[0]
const leftBottom = {
x: xAxis.toPixels(right[0][0]),
y: yAxis.toPixels(right[0][1])
}
const leftTop = {
x: xAxis.toPixels(left[0][0]),
y: yAxis.toPixels(left[0][1])
}
const rightBottom = {
x: xAxis.toPixels(left[1][0]),
y: yAxis.toPixels(left[1][1])
}
const rightTop = {
x: xAxis.toPixels(right[1][0]),
y: yAxis.toPixels(right[1][1])
}
const leftMiddle = {
x: xAxis.toPixels(4),
y: yAxis.toPixels(5.5)
}
const rightMiddle = {
x: xAxis.toPixels(10),
y: yAxis.toPixels(5.5)
}
const leftTopMiddle = {
x: xAxis.toPixels(3.7),
y: yAxis.toPixels(6.5)
}
const leftBottomMiddle = {
x: xAxis.toPixels(2.1),
y: yAxis.toPixels(4)
}
const rightTopMiddle = {
x: xAxis.toPixels(9.8),
y: yAxis.toPixels(8)
}
const rightBottomMiddle = {
x: xAxis.toPixels(9.8),
y: yAxis.toPixels(3)
}
const curveTopLeft = this.curveTopLeft = this.renderer.path().attr({
d: `M ${leftMiddle.x} ${leftMiddle.y} Q ${leftTopMiddle.x} ${leftTopMiddle.y} ${leftTop.x} ${leftTop.y}`,
'stroke-width': 2,
stroke: 'red',
zIndex: 99
}).add()
const curveBottomLeft = this.curveBottomLeft = this.renderer.path().attr({
d: `M ${leftMiddle.x} ${leftMiddle.y} Q ${leftBottomMiddle.x} ${leftBottomMiddle.y} ${leftBottom.x} ${leftBottom.y}`,
'stroke-width': 2,
stroke: 'red',
zIndex: 99
}).add()
const curveTopRight = this.curveTopRight = this.renderer.path().attr({
d: `M ${rightMiddle.x} ${rightMiddle.y} Q ${rightTopMiddle.x} ${rightTopMiddle.y} ${rightTop.x} ${rightTop.y}`,
'stroke-width': 2,
stroke: 'red',
zIndex: 99
}).add()
const curveBottomRight = this.curveBottomRight = this.renderer.path().attr({
d: `M ${rightMiddle.x} ${rightMiddle.y} Q ${rightBottomMiddle.x} ${rightBottomMiddle.y} ${rightBottom.x} ${rightBottom.y}`,
'stroke-width': 2,
stroke: 'red',
zIndex: 99
}).add()
}
}
},
title: {
text: ''
},
tooltip: {
enabled: false
},
exporting: {
enabled: false
},
credits: {
enabled: false
},
plotOptions: {
series: {
pointStart: 1
}
},
xAxis: {
max: 10,
min: 1,
tickInterval: 1
},
yAxis: {
max: 11,
min: 0,
tickInterval: 1,
},
series: [{
showInLegend: false,
data: left
}, {
showInLegend: false,
data: right
},
{
showInLegend: false,
marker: {
enabled: true
},
data: center
}],
});
});
我的预期输出应该如下所示,
And my expected output should look like below,
推荐答案
您需要创建一个没有笔画的新路径但填写。新路径应该从您已经定义的点组合起来。
You need to create a new path with no stroke but fill. The new path should be combined from the points you already defined.
const d = `M ${leftBottom.x} ${leftBottom.y}
Q ${leftBottomMiddle.x} ${leftBottomMiddle.y} ${leftMiddle.x} ${leftMiddle.y}
Q ${leftTopMiddle.x} ${leftTopMiddle.y} ${leftTop.x} ${leftTop.y}
L ${rightBottom.x} ${rightBottom.y}
Q ${rightBottomMiddle.x} ${rightBottomMiddle.y} ${rightMiddle.x} ${rightMiddle.y}
Q ${rightTopMiddle.x} ${rightTopMiddle.y} ${rightTop.x} ${rightTop.y}
Z`
const fillPath = this.renderer.path().attr({
d: d,
'stroke-width': 0,
fill: '#b19cd9',
zIndex: 1
}).add()
示例:
这篇关于如何在highcharts数据系列中添加填充颜色的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文