javascript - Chart.js 垂直对称图表

Question

我有一个用 Chart.js 制作的图表，如下所示:

<canvas id="customer_chart" height="50"></canvas>

<script>
var ctx = document.getElementById('customer_chart').getContext('2d');

var chart = new Chart(ctx, {
    type: 'line',
    data: {
        labels: ['', 'Conference', 'Webinar', 'Trial'],
        datasets: [{
            label: 'Pipeline',
            lineTension: 0.3,
            data: [0, 10, 20, 15],
            backgroundColor: [
                'rgba(255, 99, 132, 0.2)',
            ],
            borderColor: [
                'rgba(255,99,132,1)',
            ],
        }],
    }
})
</script>

但我想要的是这样的(没有把左边的数字倒过来，偷懒编辑):

但我没有看到任何立即明显的方法来做到这一点。有什么想法吗？

Answer 1

如果您碰巧查看了 Chart.js 文档，您可能会发现可以创建 plugins for your chart .
插件让您可以处理一些事件，例如 beforeUpdate、afterDraw 等，以便在显示图表之前(添加一些数据)或之后编辑您的图表一切都是画(最重要的是画一些东西)。

对于您想要的，您需要 beforeInit 事件，因为您需要在图表创建之前对其进行编辑。

顺便说一句，插件是这样创建的:

Chart.pluginService.register({
    beforeInit: function(chart) {
        // what you put here will be done before the chart initiates
    }
});

---

现在你知道用什么来做你想做的事了。

我仍然举了一个例子，我用完全相同的数据创建了另一个数据集，但是是负数。
可以看到the result here .

我需要使用 jQuery 来克隆第一个数据集 ( see this answer )。
没有它我无法让它工作，但如果你找到了一种方法，我很想听听。