在我的MVC项目中,我正在使用chart.js(v2.8.0)构建具有3个数据集的堆叠条形图。
我需要为每个数据集显示自定义的工具提示,这些提示在条形图中始终可见。 (请参见下图。)我很难理解如何实现始终可见的自定义工具提示。
这是我当前图表的JS代码:
var ctx = document.getElementById('myChart').getContext('2d');
var chart = new Chart(ctx, {
type: 'bar',
data: {
labels: labelArray,
datasets: [{
label: 'Green %',
data: greenData,
backgroundColor: 'rgb(0,166,149)',
borderColor: 'rgb(0,166,149)',
borderWidth: 1,
},
{
label: 'Orange %',
data: orangeData,
backgroundColor: 'rgb(229,117,31)',
borderColor: 'rgb(229,117,31)',
borderWidth: 1,
},
{
label: 'Grey %',
data: greyData,
backgroundColor: 'rgb(179,179,179)',
borderColor: 'rgb(179,179,179)',
borderWidth: 1,
}]
},
options: {
scales: {
xAxes: [{
stacked: true,
}],
yAxes: [{
stacked: true
}]
}
}
});
[请,如果有人可以帮助我获得一些始终可见的自定义工具提示,则在与条形相关的正确位置,则可以对其进行适当的样式设置。
假设您指的是条形图中的百分比值,这些被称为标签,而不是工具提示(当您将鼠标悬停在元素上时出现的提示)。
Label.js本身没有标签功能,但可以通过datalabels plugin添加。
bar chart sample已经非常接近您想要的结果,但是我已将其与下面的代码段中的代码合并,以帮助您。
您可以参考插件formatting documentation来定制最终结果。
var labelArray = ["James", "Mark", "Simon"],
greenData = [55, 82, 32],
orangeData = [27, 10, 53],
greyData = [18, 8, 15];
var ctx = document.getElementById('myChart').getContext('2d');
var chart = new Chart(ctx, {
type: 'bar',
data: {
labels: labelArray,
datasets: [{
label: 'Green %',
data: greenData,
backgroundColor: 'rgb(0,166,149)',
borderColor: 'rgb(0,166,149)',
borderWidth: 1
},
{
label: 'Orange %',
data: orangeData,
backgroundColor: 'rgb(229,117,31)',
borderColor: 'rgb(229,117,31)',
borderWidth: 1,
},
{
label: 'Grey %',
data: greyData,
backgroundColor: 'rgb(179,179,179)',
borderColor: 'rgb(179,179,179)',
borderWidth: 1,
}
]
},
options: {
scales: {
xAxes: [{
stacked: true,
}],
yAxes: [{
stacked: true
}]
},
plugins: {
datalabels: {
color: 'white',
font: {
weight: 'bold'
},
formatter: function(value, context) {
return Math.round(value) + '%';
}
}
}
}
});
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/Chart.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
<canvas id="myChart"></canvas>