我使用 ChartJS 2.0 在UI上绘制图表。我能够渲染饼图。但我希望鼠标悬停显示数据以及" %"标志。我如何附加%因此,如果鼠标悬停我得到Rented: 93
我希望看到Rented: 93 %
。请指导我。
以下是我现在所拥有的:
var sixthSubViewModel = Backbone.View.extend({
template: _.template($('#myChart6-template').html()),
render: function() {
$(this.el).html(this.template());
var ctx = this.$el.find('#pieChart')[0];
var data = {
datasets: [{
data: this.model.attributes.currMonthOccAvailVac,
backgroundColor: [
"#455C73",
"#BDC3C7",
"#26B99A",
],
label: 'My dataset' // for legend
}],
labels: [
"Rented",
"Vacant",
"Unavailable",
]
};
var pieChart = new Chart(ctx, {
type: 'pie',
data: data
});
},
initialize: function(){
this.render();
}
});
理解:
我了解当前悬停时间为label
并添加colon
,然后向其添加data
。因此,如果label = Rented
,Data = 93
我会在鼠标悬停时看到类似Rented: 93
的内容。如何更改鼠标悬停的文本以显示Rented: 93%
。下面是我在鼠标悬停时所拥有的图像。
我知道我需要在饼图中添加一个"options"
。但我不知道该怎么做。请帮帮我。
答案 0 :(得分:5)
您可以使用图表选项中的callbacks.label
方法编辑工具提示中显示的内容,然后使用以下命令将“%”添加到默认字符串中:
tooltipItems
- 有关详细信息,请参阅documentation(向上滚动到“工具提示项目界面”)data
- 存储数据集和标签的位置。
var ctx = document.getElementById("canvas");
var data = {
datasets: [{
data: [93, 4, 3],
backgroundColor: [
"#455C73",
"#BDC3C7",
"#26B99A",
],
label: 'My dataset' // for legend
}],
labels: [
"Rented",
"Vacant",
"Unavailable",
]
};
var pieChart = new Chart(ctx, {
type: 'pie',
data: data,
options: {
tooltips: {
callbacks: {
label: function(tooltipItems, data) {
return data.labels[tooltipItems.index] +
" : " +
data.datasets[tooltipItems.datasetIndex].data[tooltipItems.index] +
' %';
}
}
}
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.2.1/Chart.min.js"></script>
<canvas id="canvas" height="150"></canvas>