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

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

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

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

这在chart.js中可能吗

---

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

myChart

，但在中称为

my2Bar

）

如果要全局更改图形，则需要在

myChart.config.options

中编辑属性
如果要更改特定图表，则需要在

myChart.config.data

中编辑属性

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

---

如果您碰巧检查了图表的日志，并深入查看了

config

，您将最终看到图表中的条形图是使用存储在

myChart.config.data.datasets[0].\u meta[0].[data[

n

]中的属性绘制的。\u model

（

n

是从上到下绘制的第n个矩形）

您可以在此处找到一些属性：

• base

  ：开始绘制矩形的X位置（例如，在xAxe中为0）

• x

  ：矩形一直绘制到该x位置

• 高度

  ：绘制矩形的高度
• 等等

要编辑这些值，只需在不同的矩形中循环（上面路径中的

n

）

但是您不能在变量的

config

上手动执行此操作。如果执行此操作，它将无法工作，因为您的图表具有响应性（在调整大小时，它将使用前面的选项重新绘制图表）。

---

你必须使用的是

插件允许您处理在创建、更新和渲染图形时触发的所有事件

然后，在

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;
    }
}

beforeRender:函数（图表）{
对于（var i=0；i

以下是最终结果。
不幸的是，我不能制造圆点，而不是正方形

---

更新：

---

我还将所有的点连接在一起，使其看起来像是一个水平折线图（当然可以改进，但这是一个好的开始）.

可能重复。它们相似。也许可以修改水平条而不是折线图？你能在你的图表中添加一个，我可以玩它，看看我能做些什么吗？我输入了一个注释，虽然它是一个嘿，这很好。我认为改变条形基础可能是一个解决方案，但不知道从哪里开始，所以很高兴知道关于Chart.js插件。我的页面中有多个Chart.js图表。这个解决方案在JSFIDLE中有效吗，因为它是全局引用，并且其中只有一个图表？是否必须修改

beforeRender:function（Chart）

以专门引用我的图表？我刚刚复制了

beforeRender:function（Chart）

输入到我的代码中，它不会显示图表。@Curtip我给出的解决方案是使用全局编辑。然后调用后创建的每个图表都会受到影响（如中所示）。如果我找到一种方法对特定图表执行此操作，我将在Render:function（chartInstance）{，是

chartInstance

对我的图表的引用，例如

my2Bar

。我已经尝试过了，但没有乐趣。@curtisp明白了！即使是全局编辑，也只有一个图表需要编辑。这是因为

myChart.config.data.datasets[0]中的
n
。\u meta[n]

。这是绘制的第n个图表。例如，在中，第二个图表不受影响，即使插件是在开始时创建的。好的，您可以演示它对使用不同引用的多个图表工作

ctx

和

ctx2

。我的每个图表都使用

ctx

。我必须重构我的图表引用非常好，谢谢。