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

Question

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

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

我已经展示了我的水平条形图以及它看起来像水平折线图的模型。

chart.js 可以做到这一点吗？

Answer 1

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

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

在这种情况下，您需要更改特定的图表（这是水平条）。

---

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

你可以在那里找到一些属性：

• base：开始绘制矩形的 X 位置（例如，xAxe 中的 0 )。
• 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，所有的点都链接在一起，这使它看起来像是一个水平折线图（当然可以改进，但这是一个好的开始）。