Chart.js水平折线图或修改后的水平条形图
屈膝
我正在使用chart.js尝试创建相对于当前日期的事件时间线。
水平条形图是接近的，但只想显示条形的提示，例如作为点，这几乎就是水平线形图。
我已经展示了水平条形图以及水平条形图的模型。
chart.js有可能吗？
泰迪
If you happen to check the logs of your graph, and go very deep in the
What you must use are Chart.js plugins.
您首先需要知道，您可以编辑的有关图表的所有信息都存储在包含图表的变量中（myChart通常称为，但是my2Bar在您的小提琴中）。
If you want to globally change the graph, you will need to edit attributes in myChart.config.options.
If you want to change a specific chart, you will need to edit attributes in myChart.config.data.
In this case, you need to change a specific chart (which is the horizontal bar).
If you happen to check the logs of your graph, and go very deep in the
config, you will finally see that bars in your chart are drawn using attributes stored in myChart.config.data.datasets[0]._meta[0].data[ n ]._model ( n being the nth rectangle drawn, top to bottom).
Some attributes you can find there :
base: The X position where the rectangle is starting to be drawn (0 in your xAxe for instance).x: The rectangle is being drawn until this X position.height: The height of the drawn rectangle.- and so on ...
To edit these values, you just need to loop in your different rectangles (the n in the above path).
But you just can't do it manually on the config of your variable. If you do this, it won't work since your chart is responsive (on resize, it will redraw the chart using the former options).
What you must use are Chart.js plugins.
Plugins let you handle all the events that are triggered while creating, updating, rendering your graph.
然后，在您的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;
}
}
这是最终结果的jsFiddle。
不幸的是，我无法制作圆点，而不是方形点。
更新 ：
我还制作了另一个jsFiddle，其中所有点都链接在一起，这使其看起来像是水平折线图（当然可以改进，但这是一个好的开始）。
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
编辑于
相关文章
Related 相关文章
- 1
使用chart.js的水平堆积条形图
- 2
angular-chart.js中的水平条形图
- 3
如何更改Chart.js水平条形图宽度？
- 4
如何创建带有锁定y轴的水平滚动Chart.js折线图？
- 5
在Chart.js上创建水平条形图扩展
- 6
如何在条形图Chart.js上绘制水平线
- 7
如何在条形图Chart.js上绘制水平线
- 8
（水平）带有Highcharts的条形图和折线图
- 9
Chart.js - 通过单击饼图段将数据添加到折线图
- 10
Chart.js折线图未显示
- 11
Angular-chart.js-使折线图不弯曲
- 12
向Chart.js折线图添加标题
- 13
具有区域范围的Chart.js折线图
- 14
Chart.js折线图设置背景色
- 15
增加chart.js中折线图的标签大小
- 16
Chart.js-向折线图背景添加渐变
- 17
Chart.js - 折线图最右边的数据点
- 18
散景中具有多个x轴刻度的水平条形图和折线图
- 19
Microsoft Chart Control中的折线图
- 20
MPAndroid Chart如何使折线图平滑
- 21
Chart.js-在条形图中绘制水平线（类型栏）
- 22
Chart.js设置条形图的最大条形大小
- 23
如何摆脱折线图上每个点顶部的折线（Chart.js）
- 24
Chart.js：条形图单击事件
- 25
Chart.js v2.0：堆积条形图
- 26
实时更新chart.js条形图
- 27
chart.js条形图基于值的颜色变化
- 28
Chart.js堆叠和分组的条形图
- 29
Chart.js使用条形图单击标签
我来说两句