有人知道如何使用ng图表创建一个双向条形图吗?请看图片了解我正在尝试实现的
我目前有一个堆叠条形图,那么是否有一种方法可以修改此代码,将其更改为双向图表?
组件.ts代码:
public chartData = [
{
data: [1, 5, 2, 2, 3],
label: "Type 1",
blob: "a",
},
{
data: [5, 2, 3, 3, 2],
label: "Type 2",
blob: "a",
},
];
public chartLabels = [
"Name 1",
"Name 2",
"Name 3",
"Name 4",
"Name 5",
];
public chartPlugins = [];
public chartOptions = {
scales: {
yAxes: [
{
display: true,
stacked: true,
},
],
xAxes: [
{
display: true,
stacked: true,
},
],
},
};
public chartColors = [
{
backgroundColor: "red",
borderColor: "red",
},
{
backgroundColor: "green",
borderColor: "green",
},
];
Html代码:
<canvas
baseChart
[datasets]="chartData"
[labels]="chartLabels"
[options]="chartOptions"
[plugins]="chartPlugins"
[colors]="chartColors"
[legend]="true"
[chartType]="'bar'">
</canvas>
2条答案
按热度按时间vaqhlq811#
在图片中,中心左侧的值是负值。而在您的代码中,两个数据集的值都是正值。我假设您希望维护数据,但在图表中看到两个方向的正值。如果我理解得很好,请附上一个示例。
第一个
cwxwcias2#
您可以通过指定包含2个值的数组而不是单个数据点来使用浮动条。
这两个值分别是start和end,因此您可以将其指定为
[0, actualValue]
。