Chart.js条形图和折线图 [英] Chart.js Bar and Line chart
本文介绍了Chart.js条形图和折线图的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我正在尝试使用Chart.js创建条形图和折线图,但我希望条形图具有一组不同的标签。
I'm trying to create a bar and line chart using Chart.js, but I wanted to bar chart to have a different set of 'labels'.
折线图的数据位于第一个点和最后一个点[2800,1300]上,我希望折线穿过条形图的标签。
the data for the line chart is on the first and last point [2800, 1300] and I wanted the line to draw across the labels of the bar chart.
这是
预期
结果
推荐答案
我能够通过扩展Chartjs来解决此问题。
I was able to solve this by extending Chartjs.
var originalLineDraw = Chart.controllers.bar.prototype.draw;
Chart.helpers.extend(Chart.controllers.bar.prototype, {
draw: function() {
originalLineDraw.apply(this, arguments);
var chart = this.chart;
var ctx = chart.chart.ctx;
var index = chart.config.data.lineAtIndex;
if (index) {
var xaxis = chart.scales['x-axis-0'];
var yaxis = chart.scales['y-axis-0'];
ctx.save();
ctx.beginPath();
ctx.moveTo(xaxis.getPixelForValue(undefined, 0), yaxis.getPixelForValue(70));
ctx.strokeStyle = '#000000';
ctx.lineTo(xaxis.getPixelForValue(undefined, 7), yaxis.getPixelForValue(10));
ctx.stroke();
ctx.restore();
}
}
});
var config = {
type: 'bar',
data: {
labels: ["January", "February", "March", "April", "May", "June", "July"],
datasets: [{
label: "My First dataset",
data: [65, 0, 80, 81, 56, 85, 40],
fill: false
}],
lineAtIndex: 2
}
};
var ctx = document.getElementById("myChart").getContext("2d");
new Chart(ctx, config);
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.0.0-beta/Chart.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<canvas id="myChart"></canvas>
这篇关于Chart.js条形图和折线图的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文