图:两个双极条彼此下方

Question

我目前正在用AngularJs创建一个双极条形图。 截至目前，这两个系列彼此相邻显示。 这就是它目前的样子。 如何将它们彼此显示，使它们看起来像图片二？

这就是它应该的样子。 我正在使用图表师。

这是我的组件.ts：

this.client.get("https://mylink", { observe: "response" })
.subscribe(data => {
this.series = data.body["series"];
this.labels = data.body["labels"];
console.log(this.labels);
console.log(this.series);
var datawebsiteViewsChart = {
labels: this.labels,
series: this.series
};
var optionswebsiteViewsChart = {
axisX: {
showGrid: true
},
low: -900,
high: 800,
chartPadding: { top: 0, right: 0, bottom: 0, left: 0 }
};
var responsiveOptions: any[] = [
[
"screen and (max-width: 640px)",
{
seriesBarDistance: 5,
axisX: {
labelInterpolationFnc: function (value) {
return value[0];
}
}
}
]
];
var websiteViewsChart = new Chartist.Bar(
"#websiteViewsChart",
datawebsiteViewsChart,
optionswebsiteViewsChart,
responsiveOptions
);
//start animation for the Emails Subscription Chart
this.startAnimationForBarChart(websiteViewsChart);
});

这是 HTML 部分。

<div class="card card-chart">
<div class="card-header card-header-warning">
<div class="ct-chart" id="websiteViewsChart"></div>
</div>
<div class="card-body">
<h4 class="card-title">Title</h4>
<p class="card-category">Subtitle</p>
</div>
</div>

我必须更改哪些参数才能在正柱线的正下方而不是在负柱线旁边显示负柱线？

提前非常感谢！

编辑： 现在看起来像这样

Answer 1

这看起来像是Chartist上的一个未决问题。Github问题

我建议使用其他图表库(如高图表(。

如果您仍在寻找修复程序(直到引入此功能(，我通过采取以下步骤找到了解决方法

1. 首先堆叠负数系列
2. 接下来堆叠负序列的正值
3. 堆栈正系列 下一个

此外，您需要将stackBars设置为true才能正常工作。

series: [
[-1, -2, -4, -8, -6, -2, -1, -4, -10, -2],
[1, 2, 4, 8, 6, 2, 1, 4, 10, 2],
[5, 20, 5, 5, 21, 12, 22, 3, 20, 2],
]
}, {
stackBars: true,

工作示例