Total profit: $ 1399.30
价格应该以两个小数格式附加在‘总利润:$'后面。当我悬停在折线图上时,我想显示如下内容:
Quantity sold: 40 unit(s)
下面是我填充相关数组的代码:
for(var i = 0 ; i < topProductList.length; i++){
labelData.push(topProductList[i].itemName);
amountData.push((topProductList[i].price * topProductList[i].quantity).toFixed(2));
quantityData.push(topProductList[i].quantity);
}
我试图按照@grunt的建议合并x轴标签的回调:
tooltips: {
callbacks: {
title: function(t, d) {
return d.labels[t[0].index].replace(/\n/, ' ');
}
}
}
var opt = {
type: "bar",
data: {
labels: labelData,
datasets: [{
type: "bar",
label: 'Total Profit ',
data: amountData,
},{
type: "line",
label: 'Quantity Sold ',
data: quantityData,
}]
},
options: options
};
您可以使用以下工具提示的标签回调函数,当悬停在不同的图形上时,可以显示不同的工具提示标签:
tooltips: {
callbacks: {
label: function(t, d) {
var xLabel = d.datasets[t.datasetIndex].label;
var yLabel = t.yLabel;
// if line chart
if (t.datasetIndex === 0) return xLabel + ': ' + yLabel + ' unit(s)';
// if bar chart
else if (t.datasetIndex === 1) return xLabel + ': $' + yLabel.toFixed(2);
}
}
}
此外,您的第一个数据集应该是行
图表,后面是条形
,如下所示:
datasets: [{
type: "line",
label: 'Quantity Sold ',
data: quantityData
}, {
label: 'Total Profit ',
data: amountData
}]
X
var chart = new Chart(ctx, {
type: 'bar',
data: {
labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May'],
datasets: [{
type: "line",
label: 'Quantity Sold',
data: [40, 50, 60, 70, 80],
borderColor: 'orange',
fill: false
}, {
label: 'Total Profit',
data: [1399.3, 356.62, 1249, 465.23, 1480.4],
backgroundColor: 'rgba(0, 119, 220, 0.4)',
}]
},
options: {
scales: {
yAxes: [{
ticks: {
beginAtZero: true
}
}]
},
tooltips: {
callbacks: {
label: function(t, d) {
var xLabel = d.datasets[t.datasetIndex].label;
var yLabel = t.yLabel;
// if line chart
if (t.datasetIndex === 0) return xLabel + ': ' + yLabel + ' unit(s)';
// if bar chart
else if (t.datasetIndex === 1) return xLabel + ': $' + yLabel.toFixed(2);
}
}
}
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.0/Chart.min.js"></script>
<canvas id="ctx"></canvas>
我使用Chart.js库绘制条形图,我想显示工具提示不仅在条形图悬停,而且在x轴标签悬停该条形图。我找到了用于配置的方法,但它只允许我访问当前悬停栏的数组,这是没有用的。 那个么,我怎样才能访问鼠标事件,并从那个里获取位置,将其与条形标签的位置进行比较呢?还是有别的办法? 我当前的配置: 它只打印出悬停条数据,但我坚持要想出如何扩展它以满足我需要的行为。
问题内容: 我有两个链接的地块。悬停时,我想在两个图中都出现一个工具提示。我已经成功地使用了链接选择,但是现在我也想链接工具提示。 下面是一个例子。工具提示将出现在左图中。如果我可以在正确的图中显示相应的工具提示,那将是很好的。相应的数据点是具有相同ID的数据点。(有一个共享的3D列数据源;每个图采用不同的2D视图)。 附言 我将改进工具提示中的文本。 更新资料 最终得到如下结果: 问题答案: 我
我有一个天气网站,你可以输入城市的名字,它会显示来自OpenWeatherAPI的天气数据。我也有一个使用Chart.js制作的图表。但是有一个问题,当我搜索其他城市时,图表会更新,但是当我将光标悬停在一些点上时,每次鼠标悬停时,都会突然出现以前的图表,而不是当前的图表。在更新图表之前,我尝试使用update()和destroy()方法,但似乎没有帮助。 我在一个名为chartContainer的
我想给我的workinprogress机器人添加工具提示,但出现了这个错误。 /home/runner/simplebot/index.js:46. setColor("#4287f5"). setTitle("工具提示示例"). setdescription("悬停工具提示":[(i)](${message.url}'嘿,看!它是一个工具提示!'));message.channel.send(工
问题内容: 我基于Tkinter创建了一个应用程序,该应用程序使用Matplotlib绘制波形。我不知道如何更改Matplotlib工具栏按钮的工具提示(由于我的应用程序是捷克语,因此我需要翻译英文说明)。我还想更改/翻译或仅删除单击缩放或平移按钮时出现在工具栏面板旁边的说明(,)。 我发现了一些有关如何从工具栏添加或删除按钮的有用提示,但是没有找到有关自定义工具提示/描述的任何建议。我认为这与前
我使用的是Chart.js2.6,我已经实现了horizontalLine插件,在条形图上显示平均值。它可以正常工作,但是当工具提示显示在与直线相交的位置时,它部分被水平线本身覆盖。我试图找出如何使工具提示在水平线上方绘制。 我知道工具提示是canvas元素的一部分,因此没有z-index属性。我怎样才能做到这一点? 下面是我使用的水平线插件。 ... 然后我使用以下命令将其添加到条形图选项中 它