admin管理员组文章数量:1392002
I have created a bo dual bar graph using chartjs. My code is given below. The bar bo dual graph is working fine but I had got a requirement to put a line for the green color bar graph which connects all its top mid points. I have somewhat drew a line graph connecting the green graph but the problem which I am facing is that the line graph spot point is not in the top middle of the green bar graph like as shown below.
Can anyone please tell me how to make the line spot in the top middle of the bar graph
Working Demo
html
<canvas id="canvas"></canvas>
js
var barChartData = {
labels: ["January", "February", "March", "April", "May", "June", "July"],
datasets: [{
type: 'bar',
label: "Visitor",
data: [10, 59, 340, 521, 450, 200, 195],
fill: false,
backgroundColor: "rgba(220,220,220,0.5)",
borderColor: '#71B37C',
hoverBackgroundColor: '#71B37C',
hoverBorderColor: '#71B37C'
}, {
type: 'bar',
label: "Visitor",
data: [200, 185, 590, 621, 250, 400, 95],
fill: false,
backgroundColor: '#71B37C',
borderColor: '#71B37C',
hoverBackgroundColor: '#71B37C',
hoverBorderColor: '#71B37C'
}, {
type:'line',
data: [200, 185, 590, 621, 250, 400, 95],
fill: false,
borderColor: '#EC932F',
backgroundColor: '#EC932F',
pointBorderColor: '#EC932F',
pointBackgroundColor: '#EC932F',
pointHoverBackgroundColor: '#EC932F',
pointHoverBorderColor: '#EC932F'
} ]
};
window.onload = function() {
var ctx = document.getElementById("canvas").getContext("2d");
window.myBar = new Chart(ctx, {
type: 'bar',
data: barChartData,
options: {
responsive: true,
tooltips: {
mode: 'label'
},
elements: {
line: {
fill: false
}
},
scales: {
xAxes: [{
display: true,
gridLines: {
display: false
},
labels: {
show: true,
}
}],
yAxes: [{
type: "linear",
display: true,
position: "left",
id: "y-axis-1",
gridLines:{
display: false
},
labels: {
show:true,
}
}, {
type: "linear",
display: true,
position: "right",
id: "y-axis-2",
gridLines:{
display: false
},
labels: {
show:true,
}
}]
}
}
});
};
I have created a bo dual bar graph using chartjs. My code is given below. The bar bo dual graph is working fine but I had got a requirement to put a line for the green color bar graph which connects all its top mid points. I have somewhat drew a line graph connecting the green graph but the problem which I am facing is that the line graph spot point is not in the top middle of the green bar graph like as shown below.
Can anyone please tell me how to make the line spot in the top middle of the bar graph
Working Demo
html
<canvas id="canvas"></canvas>
js
var barChartData = {
labels: ["January", "February", "March", "April", "May", "June", "July"],
datasets: [{
type: 'bar',
label: "Visitor",
data: [10, 59, 340, 521, 450, 200, 195],
fill: false,
backgroundColor: "rgba(220,220,220,0.5)",
borderColor: '#71B37C',
hoverBackgroundColor: '#71B37C',
hoverBorderColor: '#71B37C'
}, {
type: 'bar',
label: "Visitor",
data: [200, 185, 590, 621, 250, 400, 95],
fill: false,
backgroundColor: '#71B37C',
borderColor: '#71B37C',
hoverBackgroundColor: '#71B37C',
hoverBorderColor: '#71B37C'
}, {
type:'line',
data: [200, 185, 590, 621, 250, 400, 95],
fill: false,
borderColor: '#EC932F',
backgroundColor: '#EC932F',
pointBorderColor: '#EC932F',
pointBackgroundColor: '#EC932F',
pointHoverBackgroundColor: '#EC932F',
pointHoverBorderColor: '#EC932F'
} ]
};
window.onload = function() {
var ctx = document.getElementById("canvas").getContext("2d");
window.myBar = new Chart(ctx, {
type: 'bar',
data: barChartData,
options: {
responsive: true,
tooltips: {
mode: 'label'
},
elements: {
line: {
fill: false
}
},
scales: {
xAxes: [{
display: true,
gridLines: {
display: false
},
labels: {
show: true,
}
}],
yAxes: [{
type: "linear",
display: true,
position: "left",
id: "y-axis-1",
gridLines:{
display: false
},
labels: {
show:true,
}
}, {
type: "linear",
display: true,
position: "right",
id: "y-axis-2",
gridLines:{
display: false
},
labels: {
show:true,
}
}]
}
}
});
};
1 Answer
Reset to default 9 +50To change the display of a specific chart, you have to edit the config of your whole graph.
Deep inside, you will find the attributes you need to change for your specific chart (in your case, the line chart).
If you try to search deep in it, you will finally find
x & yattributes for your line chart, stored in myBar.config.data.datasets[2].metaData[i]._model (which was hard to find, I admit).
Then, you just need to add this to your code (after the generation of your myBar) :
// For each value of your line chart ...
for (var i = 0; i < myBar.config.data.datasets[2].metaData.length; i++) {
// Get the bar width associated to this value
var barWidth = myBar.config.data.datasets[1].metaData[i]._model.width;
// Get the percentage that the bar is taking in the graph
var barPercentage = myBar.config.options.scales.xAxes[0].barPercentage;
// Add the width of the bar / (2*percentage) -- which is the half of the bar
myBar.config.data.datasets[2].metaData[i]._model.x += barWidth / (2*barPercentage);
// Also edit the controlPointNext and controlPointPrevious to change the bezier curve display
myBar.config.data.datasets[2].metaData[i]._model.controlPointNextX += barWidth / (2*barPercentage);
myBar.config.data.datasets[2].metaData[i]._model.controlPointPreviousX += barWidth / (2*barPercentage);
}
Check the plunker for the full code.
And here is the final result :
Update - Responsiveness added :
To make the graph responsive, you will need to achieve the loop inside Chart.js plugins.
Plugins let you handle all the events that are triggered while creating, updating, rendering your graph.
We will especially edit the afterUpdate event, which is triggered every time there is an update (a resize for instance).
Chart.pluginService.register({
afterUpdate: function(chart) {
// Loop in here
}
});
Here is another fiddle with the final result, which is responsive.
Note that the bar graph is drawn after the line one (I don't know why) so I had to lower the alpha of the bar background color.
本文标签： javascriptline graph spot in the top middle of the bar graphStack Overflow
版权声明：本文标题：javascript - line graph spot in the top middle of the bar graph - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1744774904a2624566.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。
发表评论