ChartJS

ChartJS - 如何以单个元素作为一行显示折线图？(ChartJS - how to display line chart with single element as a line? (not as a dot))

我正在使用： http ： //www.chartjs.org/docs/#chart-configuration-mixed-chart-types + AngularJS包装器： http ： //jtblin.github.io/angular-chart.js/

创建图表时，您可以选择将不同的图表类型叠加在一起作为单独的数据集。

为此，您必须单独为每个数据集设置一个类型。您可以使用条形图和折线图类型创建混合图表类型。

创建图表时，必须将整体类型设置为条形。

线条呈现方式略有不同 - 如果我在同一图表上显示bar和line ，则该线条不会结束。

它并不重要，除非我只有单个元素......

ChartJS显示单个元素作为点的折线图 - Chartjs线图只有一个点 - 如何居中 （他们建议添加一些null元素，我不确定我是否要遵循该路线）

这里有一些如何在画布上绘制垂直线的例子： http ： //jsfiddle.net/zk9oc4c9/ （手动计算所有东西感觉太费力了）

Codepen： http ：//codepen.io/stefek99/pen/WpRQgp？editors = 1010

也许有更好的方法？

I'm using: http://www.chartjs.org/docs/#chart-configuration-mixed-chart-types + AngularJS wrapper: http://jtblin.github.io/angular-chart.js/

When creating a chart, you have the option to overlay different chart types on top of each other as separate datasets.

To do this, you must set a type for each dataset individually. You can create mixed chart types with bar and line chart types.

When creating the chart you must set the overall type as bar.

There is a slight difference how lines are presented - if I display bar and line on the same graph, the line does not go to an end.

It doesn't really matter that much, unless I have single element only...

ChartJS displays line charts with single element as a dot - Chartjs linechart with only one point - how to center (and they suggest added some null elements, I'm not sure if I want to follow that route)

Here some example how to draw vertical line on canvas: http://jsfiddle.net/zk9oc4c9/ (feels like too much effort calculating everything manually)

Codepen: http://codepen.io/stefek99/pen/WpRQgp?editors=1010

Maybe there is a better way?

最满意答案

除了您找到的选项之外，您还可以使用chart.js注释插件轻松绘制线条，而无需手动处理画布中的渲染像素。请注意，该插件由chart.js与同一团队创建/支持，并在chart.js文档中提及。

这是一个展示您的场景的示例代码。

添加插件后，只需在图表配置中设置其他属性即可。

var myChart = new Chart(ctx, { type: 'line', data: { labels: ["January"], datasets: [{ label: 'Dataset 1', borderColor: window.chartColors.blue, borderWidth: 2, fill: false, data: [5] }] }, options: { responsive: true, title: { display: true, text: 'Chart.js Stacked Bar and Unstacked Line Combo Chart' }, tooltips: { mode: 'index', intersect: true }, annotation: { annotations: [{ type: 'line', mode: 'horizontal', scaleID: 'y-axis-0', value: 5, borderColor: 'rgb(75, 192, 192)', borderWidth: 4, label: { enabled: false, content: 'Test label' } }] } } });

这仍然有点麻烦，因为您已经定义了与数据点值分开的行的位置，但它确实比其他方法更容易。

我不确定该插件是否存在现有的角度扩展，但我认为如果需要，您可以创建一个足够简单的扩展。

This helped me a lot: How to draw Horizontal line on Bar Chart Chartjs

Here is the working demo: http://codepen.io/stefek99/pen/ZeXzBr?editors=1010

Defining a plugin:

Chart.pluginService.register({ afterDraw: function(chart) { if (typeof chart.config.options.lineAt != 'undefined') { var lineAt = chart.config.options.lineAt; var ctxPlugin = chart.chart.ctx; var xAxe = chart.scales[chart.config.options.scales.xAxes[0].id]; var yAxe = chart.scales[chart.config.options.scales.yAxes[0].id]; var position = yAxe.getPixelForValue(lineAt) ctxPlugin.strokeStyle = "red"; ctxPlugin.beginPath(); ctxPlugin.moveTo(xAxe.left, position); ctxPlugin.lineTo(xAxe.right, position); ctxPlugin.stroke(); } } });