javascript - 如何在 Angular 中使用高图表?
问题描述
我正在使用高图表堆积柱形图。我可以得到带有天蓝色和白色的条形图,但我需要一个点在 24、41 和 49 y_axis 点的条形图,如图所示。请帮助我实现这一目标。提前致谢。到目前为止我尝试过的代码。
export class AppComponent {
title = 'Smaple';
options = {
chart: {
type: 'column'
},
title: {
text: 'Stacked'
},
xAxis: {
categories: ['data1', 'data2', 'data3', 'data4']
},
yAxis: {
min: 0,
tickInterval: 50,
max: 100
},
tooltip: {
headerFormat: '<b>{point.x}</b><br/>',
pointFormat: '{series.name}: {point.y}<br/>Total: {point.stackTotal}'
},
plotOptions: {
column: {
stacking: 'normal',
},
series: {
borderColor: '#000'
}
},
series: [{
name: 'Total',
data: [{ y: 20, color: "white"}]
}, {
name: 'Actual',
data: [{ y: 80, color: "skyblue"}],
}]
};
解决方案
您可以使用Highcharts.SVGRenderer并在每列上呈现其他元素。首先使用renderer.rect创建三个矩形,然后使用renderer.path创建它们之间的直线。请注意,每次渲染图表时,您都必须销毁旧元素并渲染新元素。检查我在下面发布的演示。
HTML:
<script src="https://code.highcharts.com/highcharts.js"></script>
<div id="container"></div>
JS:
Highcharts.chart('container', {
chart: {
type: 'column',
events: {
render: function() {
var chart = this,
series = chart.series[1],
points = series.points,
yAxis = chart.yAxis[0],
customPoints = [
24,
41,
49
],
path = [],
height = 7,
element,
width,
x,
y,
i;
if (chart.customElements) {
chart.customElements.forEach(function(elem) {
elem.destroy();
});
}
chart.customElements = [];
points.forEach(function(point) {
if (point.series.visible) {
x = point.plotX + chart.plotLeft;
width = point.pointWidth * 0.2;
for (i = 0; i < customPoints.length; i++) {
y = yAxis.toPixels(customPoints[i]);
if (i === 0) {
path.push('M');
} else {
path.push('L');
}
path.push(x);
path.push(y);
element = chart.renderer.rect(x - (width / 2), y, width, height)
.attr({
strokeWidth: 1,
fill: '#000'
})
.add()
.toFront();
chart.customElements.push(element);
}
element = chart.renderer.path(path)
.attr({
'stroke-width': 1,
stroke: '#000',
fill: '#000'
})
.add()
.toFront();
chart.customElements.push(element);
}
});
}
}
},
plotOptions: {
column: {
stacking: 'normal',
},
series: {
borderColor: '#000'
}
},
series: [{
name: 'Total',
data: [{
y: 20,
color: "white"
}]
}, {
name: 'Actual',
data: [{
y: 80,
color: "skyblue"
}]
}]
});
推荐阅读
- javascript - 如何删除 HTML / CSS 中选定选项卡的边框?
- c - Makefile 用 main 函数编译许多程序,但只有一个 makefile 错误
- reactjs - 路由错误,如何解决?
- java - Scala 中的 Java 方法的别名
- c++ - 为什么在这种情况下 x = 44?
- batch-file - 批处理 - 仅接管某些列
- python - Discord Music Bot 错误 discord.ext.commands.errors.CommandInvokeError:命令引发异常:KeyError:'videoId'
- python - Python 导入语句解释
- reactjs - ReactJS - React ContextMenu:菜单出现在滚动条后面
- java - Java 8 流是不可变的吗?