更改图表JS条形图边框到虚线 [英] Change Chart JS Bar Chart Border to Dotted Line
问题描述
我使用Chart JS构建一个活动仪表板。我很好奇，如果有一种方法来改变一个条形图的边界，以虚线或点线？我查看了有关
脚本
...
Chart.helpers.each（myChart.getDatasetMeta（0）.data，function（rectangle，index）{
rectangle.draw = function（）{
myChart.chart.ctx.setLineDash 10，10]）;
Chart.elements.Rectangle.prototype.draw.apply（this，arguments）;
}
}，null）;
其中 myChart 是图表对象。 / p>
小提琴 - http://jsfiddle.net/Ls8u10dp/
I'm using Chart JS to build out a live dashboard. I was curious if there is a way to change the border of a bar chart to be dashed or dotted? I've looked through the documentation on http://www.chartjs.org/docs/ but I could only find a mention of dashed lines for Line Plots such as borderDash(). This doesn't seem to apply to bar chart borders.
I would like a dashed border on the bar such as in the left bar chart in this image: enter image description here
The dummy code that produces the plot (on the right) above:
<!doctype html>
<html>
<head>
<title>Combo Bar-Line Chart</title>
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.0.2/Chart.bundle.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.0.2/Chart.bundle.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.0.2/Chart.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.0.2/Chart.min.js"></script>
<style>
canvas {
-moz-user-select: none;
-webkit-user-select: none;
-ms-user-select: none;
}
</style>
</head>
<body>
<div style="width: 75%">
<canvas id="canvas"></canvas>
</div>
<button id="randomizeData">Randomize Data</button>
<script>
var randomScalingFactor = function() {
return (Math.random() > 0.5 ? 1.0 : -1.0) * Math.round(Math.random() * 100);
};
var randomColorFactor = function() {
return Math.round(Math.random() * 255);
};
var barChartData = {
labels: ["January", "February", "March", "April", "May", "June", "July"],
datasets: [{
type: 'bar',
label: 'Dataset 1',
backgroundColor: "rgba(151,187,205,0.5)",
data: [randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor()],
borderColor: 'black',
borderWidth: 2
}, {
type: 'bar',
label: 'Dataset 3',
backgroundColor: "rgba(220,220,220,0.5)",
data: [randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor()],
borderColor: 'black',
borderWidth: 2,
fillText: 'test'
}, ]
};
window.onload = function() {
var ctx = document.getElementById("canvas").getContext("2d");
window.myBar = new Chart(ctx, {
type: 'bar',
data: barChartData,
options: {
responsive: true,
title: {
display: true,
text: 'Chart.js Combo Bar Line Chart'
},
scales: {
xAxes: [{
stacked: true,
}],
yAxes: [{
stacked: false
}]
},
animation: {
onComplete: function () {
var ctx = this.chart.ctx;
ctx.textAlign = "center";
Chart.helpers.each(this.data.datasets.forEach(function (dataset) {
console.log("printing dataset" + dataset);
console.log(dataset);
Chart.helpers.each(dataset.metaData.forEach(function (bar, index) {
console.log("printing bar" + bar);
ctx.fillText(dataset.data[index], bar._model.x, bar._model.y - 10);
ctx.fillText(dataset.data[index], bar._model.x, bar._model.y - 20);
}),this)
}),this);
}
} }
});
};
$('#randomizeData').click(function() {
$.each(barChartData.datasets, function(i, dataset) {
dataset.backgroundColor = 'rgba(' + randomColorFactor() + ',' + randomColorFactor() + ',' + randomColorFactor() + ',.7)';
dataset.data = [randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor()];
});
window.myBar.update();
});
</script>
Any help would be greatly appreciated!
Best
With version 2.x of the library you can simply override the draw method of the rectangles that make up the bars
Preview
Script
...
Chart.helpers.each(myChart.getDatasetMeta(0).data, function (rectangle, index) {
rectangle.draw = function () {
myChart.chart.ctx.setLineDash([10, 10]);
Chart.elements.Rectangle.prototype.draw.apply(this, arguments);
}
}, null);
where myChart is your chart object.
Fiddle - http://jsfiddle.net/Ls8u10dp/
这篇关于更改图表JS条形图边框到虚线的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
