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

Question

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

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

我已经展示了我的水平条形图以及它作为水平折线图的样子。

这可以用chart.js吗？

Answer 1

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

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

在这种情况下，您需要更改特定图表（，即横条）。

<小时/> 如果您碰巧检查图表的日志，并深入myChart.config.data.datasets[0]._meta[0].data[，您最终会看到图表中的条形图是使用n {中存储的属性绘制的{1}} ]._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，其中所有的点都链接在一起，这使得它看起来像是一个水平线图（当然可以改进，但它是一个好的开始 ）。