javascript - 图表：彼此下方的两个双极条

问题描述

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

这是我的component.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>

我必须更改哪些参数才能将负条直接显示在正条下方而不是在它们旁边？

非常感谢您！

编辑：现在看起来像这样

标签： javascriptangularchartschart.jsangular-chartist.js

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

我建议使用其他图表库（如 highcharts）。

如果您仍在寻找修复程序（在引入此功能之前），我通过以下步骤找到了解决方法

先堆叠负数系列
下一个堆叠负系列的正值
接下来堆叠正数系列

此外，您需要设置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,

工作示例

javascript - 图表：彼此下方的两个双极条

问题描述

解决方案

推荐阅读