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

Question

我正在使用 chart.js 尝试创建与当前日期相关的事件时间轴。

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

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

这可以用 chart.js 实现吗？

Answer 1

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

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

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

---

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

/p>

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

• 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>