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） 没有它我无法使它工作，但如果你找到了办法，我想听听它。