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

我正在使用: http : // + AngularJS包装器: http : //


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


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


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

这里有一些如何在画布上绘制垂直线的例子: http : // (手动计算所有东西感觉太费力了)

Codepen: http :// = 1010


I'm using: + AngularJS wrapper:

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: (feels like too much effort calculating everything manually)


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:, 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:

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

Checking if the line is required

var _drawLineOnTopOfADot = function(chartData) { if (chartData.labels.length !== 1) return; // only handling graphs that have single item if (chartData.dataSetOverride.length < 2) return; // only when we have at least two types of graph var indexOfLineGraph = -1; for (var i=0; i<chartData.dataSetOverride.length; i++) { if (chartData.dataSetOverride[i].type === "line") { indexOfLineGraph = i; break; } } if (indexOfLineGraph === -1) return; // no line chart, no worries chartData.options = chartData.options || {}; chartData.options.lineAt =[indexOfLineGraph][0]; }

I've spent way too much time on that.