我有条形图,我想用图表 js 显示值数据的图表和带有 data1 的工具提示
var canvas = document.getElementById("barChart");
var ctx = canvas.getContext('2d');
// Global Options:
Chart.defaults.global.defaultFontColor = 'dodgerblue';
Chart.defaults.global.defaultFontSize = 16;
// Data with datasets options
var data = {
labels: ["Vanilla", "Chocolate", "Strawberry"],
datasets: [
{
label: "Ice Cream Prices ",
fill: true,
backgroundColor: [
'moccasin',
'saddlebrown',
'lightpink'],
data: [11, 9, 4],
data1: [111, 19, 14]
}
]
};
var options = {
tooltips: {
callbacks: {
label: function(tooltipItem) {
return "$" + Number(data1) + " and so worth it !";
}
}
},
title: {
display: true,
text: 'Ice Cream Truck',
position: 'bottom'
},
scales: {
yAxes: [{
ticks: {
beginAtZero:true
}
}]
}
};
// Chart declaration:
var myBarChart = new Chart(ctx, {
type: 'bar',
data: data,
options: options
});
body{
background-color: #333;
}
#barChart{
background-color: aliceblue;
border-radius: 6px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.2.1/Chart.min.js"></script>
<div class="container">
<br />
<div class="row">
<div class="col-md-1"></div>
<div class="col-md-10">
<!-- Chart.js Canvas Tag -->
<canvas id="barChart"></canvas>
</div>
<div class="col-md-1"></div>
</div>
</div>
我有显示数据的图表,并尝试使用 data1 值显示工具提示。 但无法显示。现在出现错误。
答案 0 :(得分:1)
您应该如下定义您的 tooltips.callback.label
函数:
tooltips: {
callbacks: {
label: (tooltipItem, data) => {
const data1 = data.datasets[0].data1;
return "$" + data1[tooltipItem.index] + " and so worth it !";
}
}
}
<块引用>
有关详细信息,请参阅 Chart.js v2.9.4 文档中的 Label Callback 一章。
请查看您修改后的可运行代码,看看它是如何工作的。
var canvas = document.getElementById("barChart");
var ctx = canvas.getContext('2d');
// Global Options:
Chart.defaults.global.defaultFontColor = 'dodgerblue';
Chart.defaults.global.defaultFontSize = 16;
// Data with datasets options
var data = {
labels: ["Vanilla", "Chocolate", "Strawberry"],
datasets: [{
label: "Ice Cream Prices ",
fill: true,
backgroundColor: [
'moccasin',
'saddlebrown',
'lightpink'
],
data: [11, 9, 4],
data1: [111, 19, 14]
}]
};
var options = {
tooltips: {
callbacks: {
label: (tooltipItem, data) => {
const data1 = data.datasets[0].data1;
return "$" + data1[tooltipItem.index] + " and so worth it !";
}
}
},
title: {
display: true,
text: 'Ice Cream Truck',
position: 'bottom'
},
scales: {
yAxes: [{
ticks: {
beginAtZero: true
}
}]
}
};
// Chart declaration:
var myBarChart = new Chart(ctx, {
type: 'bar',
data: data,
options: options
});
body{
background-color: #333;
}
#barChart{
background-color: aliceblue;
border-radius: 6px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.min.js"></script>
<div class="container">
<br />
<div class="row">
<div class="col-md-1"></div>
<div class="col-md-10">
<canvas id="barChart"></canvas>
</div>
<div class="col-md-1"></div>
</div>
</div>