Question

我目前正在使用AngularJs创建一个双极Barchart。到目前为止，两个系列彼此相邻显示。 This is what it currently looks like. 如何将它们彼此下方显示，使其看起来像图二？

This is what it should look like. 我正在使用Chartist。

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

我需要更改哪些参数才能将负条显示在正条的正下方，而不是在正条的旁边？

非常感谢您！

编辑： Now it looks like this

Answer 1

这似乎是Chartist的未解决问题。 Github issue

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

如果您仍在寻找解决方案（直到引入此功能），我可以通过执行以下步骤找到解决方法

先堆叠否定系列
然后堆叠负系列的正值
接下来堆叠正面系列

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

Working Example

图表：两个相互平行的双极条

1 个答案: