javascript - Chart.js 水平折线图或修改后的水平条形图

Question

我正在使用 Chart.js 尝试创建相对于当前日期的事件时间线。

水平条形图很接近，但只想显示条形的尖端，例如作为点，这几乎是水平折线图。

我已经展示了水平条形图以及水平折线图的模型。

这可以用chart.js实现吗？

Answer 1

您首先需要知道您可以编辑的有关图表的所有信息都存储在包含图表的变量中(通常称为 myChart ，但在 your fiddle 中称为 my2Bar ) .

如果您想全局更改图表，则需要编辑 myChart.config.options 中的属性。
如果您想更改特定图表，则需要编辑 myChart.config.data 中的属性。

在这种情况下，您需要更改特定图表(即水平条)。

---

如果您碰巧检查了图表的日志，并深入了解了 config，您最终会看到图表中的条形是使用 myChart.config.data 中存储的属性绘制的。数据集[0]._meta[0].data[n]._model (< strong>n 是从上到下绘制的第 n 个矩形)。

您可以在那里找到一些属性:

• base:开始绘制矩形的 X 位置(0 in例如你的 xAxe)。
• x:矩形将被绘制到这个X位置。
• height:绘制矩形的高度。
• 等等...

要编辑这些值，您只需循环不同的矩形(上述路径中的 n)。

但是您无法在变量的config 上手动执行此操作。如果您这样做，它将不起作用，因为您的图表是响应式的(在调整大小时，它将使用以前的选项重新绘制图表)。

---

您必须使用的是 Chart.js plugins 。

插件可让您处理创建、更新、渲染图表时触发的所有事件。

然后，在您的 beforeRender 事件中(在初始化之后、绘图之前触发)，您需要在不同的矩形中循环来编辑值以影响他们将被绘制:

beforeRender: function(chart) {
    for (var i = 0; i < chart.config.data.datasets[0]._meta[0].data.length; i++) {
        // Change both `3` values to change the height & width of the point 
        chart.config.data.datasets[0]._meta[0].data[i]._model["base"] = chart.config.data.datasets[0]._meta[0].data[i]._model["x"] + 3;
        chart.config.data.datasets[0]._meta[0].data[i]._model["height"] = 3;
    }
}

这里是 a jsFiddle 最终结果。
不幸的是，我无法制作圆形点，而不是方形点。

---

更新:

我还制作了 another jsFiddle，其中所有点都链接在一起，这使它看起来像是一个水平折线图(当然可以改进，但这是一个好的开始)。 p>