【发布时间】：2016-09-16 21:16:15
【问题描述】：
我正在创建一个 Chart.js 条形图，如下所示：
HTML
<canvas id="priceComplianceBarChart" width="540" height="360"></canvas>
JQUERY
var barChartData = {
labels: ["Bix Produce", "Capitol City", "Charlies Portland", "Costa Fruit and Produce", "Get Fresh Sales", "Loffredo East", "Loffredo West", "Paragon", "Piazza Produce"],
datasets: [
{
fillColor: "rgba(220,220,220,0.5)",
strokeColor: "rgba(220,220,220,0.8)",
highlightFill: "rgba(220,220,220,0.75)",
highlightStroke: "rgba(220,220,220,1)",
data: [17724, 5565, 3806, 5925, 5721, 6635, 14080, 9027, 25553]
},
{
fillColor: "rgba(151,187,205,0.5)",
strokeColor: "rgba(151,187,205,0.8)",
highlightFill: "rgba(151,187,205,0.75)",
highlightStroke: "rgba(151,187,205,1)",
data: [17, 1, 18, 14, 3, 1, 5, 10, 1]
}
]
}
var ctxBarChart = document.getElementById("priceComplianceBarChart").getContext("2d");
var myBarChart = new Chart(ctxBarChart).Bar(barChartData);
生成的图表如下所示：
不过，我想要的是两个并排的值以不同的颜色堆叠在同一个条上，然后是一个计算值（占总数的百分比，由主要颜色表示）作为标签添加到每个条形图上并附加到图例中（例如，“Bix Produce - 99.9%”）。
将 val 附加到条形下方的图例标签我可以自己弄清楚，但如何将两个值堆叠到一个条形上，以及如何将标签添加到条形 - 我没有了解如何实现这些目标。
更新
我正在尝试 Sergiu M 的代码，但一定是做错了什么，因为应该出现图表的 div 现在完全空白。这是我的新代码：
HTML
<div class="topright">
<h2 class="sectiontext">Price Compliance</h2>
<div class="graph_container">
<canvas id="priceComplianceBarChart" width="400" height="400"></canvas>
</div>
</div>
CSS
.topright {
margin-top: -4px;
margin-right: 16px;
margin-bottom: 16px;
margin-left: -12px;
padding: 16px;
border: 1px solid black;
}
.sectiontext {
font-size: 1.5em;
font-weight: bold;
font-family: Candara, Calibri, Cambria, serif;
color: green;
margin-top: -4px;
}
JQUERY
var ctxBarChart = document.getElementById("priceComplianceBarChart").getContext("2d");
var priceBarChart = new Chart(ctxBarChart, {
type: 'bar',
data: {
labels: ["Bix Produce", "Capitol City", "Charlies Portland", "Costa Fruit and Produce", "Get Fresh Sales", "Loffredo East", "Loffredo West", "Paragon", "Piazza Produce"],
datasets: [{
label: 'Some Values',
backgroundColor: 'rgba(97, 188, 109, 0.2)',
borderColor: 'rgba(97, 188, 109, .8)',
data: [7000, 5565, 3806, 5925, 5721, 6635, 14080, 9027, 25553]
//data: [17724, 2565, 1506, 3625, 3721, 4635, 7080, 4027, 12553]
}, {
label: 'Other Values',
backgroundColor: 'rgba(236, 107, 86, 0.2)',
borderColor: 'rgba(236, 107, 86, .8)',
data: [17724, 2565, 1506, 3625, 3721, 4635, 7080, 4027, 12553]
//data: [17, 1, 18, 14, 3, 1, 5, 10, 1]
}]
},
options: {
tooltips: {
enabled: false
},
animation: {
duration: 0,
onComplete: function () {
if (this.data.datasets.length === 2) {
// render the value of the chart above the bar
var ctx = this.chart.ctx;
ctx.font = Chart.helpers.fontString(Chart.defaults.global.defaultFontSize, 'normal', Chart.defaults.global.defaultFontFamily);
ctx.fillStyle = this.chart.config.options.defaultFontColor;
ctx.textAlign = 'center';
ctx.textBaseline = 'bottom';
var firstDataSet = this.data.datasets[0];
var secondDataSet = this.data.datasets[1];
if (firstDataSet.length === secondDataSet.length) {
for (var i = 0; i < firstDataSet.data.length; i++) {
var firstModel = firstDataSet._meta[Object.keys(firstDataSet._meta)[0]].data[i]._model;
var secondModel = secondDataSet._meta[Object.keys(secondDataSet._meta)[0]].data[i]._model;
var total = firstDataSet.data[i] + secondDataSet.data[i];
if (firstDataSet.data[i] >= secondDataSet.data[i]) {
ctx.fillText((firstDataSet.data[i] * 100 / total).toFixed(2) + '%', firstModel.x, firstModel.y + 30);
} else {
ctx.fillText((secondDataSet.data[i] * 100 / total).toFixed(2) + '%', secondModel.x, secondModel.y + 30);
}
}
}
}
}
},
scales: {
yAxes: [{
ticks: {
beginAtZero: true
},
stacked: true
}],
xAxes: [{
stacked: true,
}]
}
}
});
【问题讨论】：
-
或许这个github issue可以帮到你github.com/chartjs/Chart.js/issues/10
-
你能举一些例子来说明你想如何显示你的图表。能否为最终输出添加屏幕截图
-
@Abhijeet：我不知道它应该是什么样子；它只是堆叠在另一个矩形数据（“堆叠条形图”）上的一个矩形数据，百分比值打印为较大块中的标签。例如，如果总数为 1,000，而较大的块为 900，则 % 标签将为“90%”
标签： javascript jquery charts bar-chart chart.js