0
Ich verwende Chart JS, um ein Live-Dashboard aufzubauen. Ich war neugierig, ob es eine Möglichkeit gibt, den Rand eines Balkendiagramms zu ändern, um gestrichelt oder punktiert zu sein. Ich habe in der Dokumentation auf http://www.chartjs.org/docs/ geschaut, aber ich konnte nur eine gestrichelte Linie für Line Plots wie borderDash() finden. Dies scheint nicht für Balkendiagrammgrenzen zu gelten.Ändern Sie JS Balkendiagramm Grenze zu gepunktete Linie
Ich möchte einen gestrichelten Rahmen auf dem Stab, wie in der linken Balkendiagramm in diesem Bild: enter image description here
Die Dummy-Code, der die Handlung erzeugt (auf der rechten Seite) oben:
<!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>
Jede Hilfe wäre sehr dankbar!
Beste
Das ist großartig! Danke vielmals! Was wäre, wenn ich zwei Datensätze hätte und nur einen davon streichen wollte? – user3878014
Ich denke, der Code tut genau das - beachten Sie die getDatasetMeta (0). Wenn Sie möchten, dass die zweite gestrichelte Linie ist, ändern Sie die 0 zu 1. – potatopeelings