如何解决自定义 ChartJS 悬停数据格式
我有以下图表:
import React,{Component} from 'react';
import { Line } from 'react-chartjs-2';
const data = {
labels: ['January','February','march','April','May','June','July'],datasets: [
{
label: 'First ',fill: false,lineTension: 0.1,backgroundColor: 'rgba(75,192,0.4)',borderColor: 'rgba(75,1)',borderCapStyle: 'butt',borderDash: [],borderDashOffset: 0.0,borderJoinStyle: 'miter',pointBorderColor: 'rgba(75,pointBackgroundColor: '#fff',pointBorderWidth: 1,pointHoverRadius: 5,pointHoverBackgroundColor: 'rgba(75,pointHoverBorderColor: 'rgba(220,220,pointHoverBorderWidth: 2,poinTradius: 1,pointHiTradius: 10,data: [65,59,80,81,56,55,40]
}
]
};
const options = {
tooltips: {
callbacks: {
label: function(tooltipItem,data) {
var label = data.datasets[tooltipItem.datasetIndex].label || '';
if (label) {
label += '-->';
}
return [2,4,1,5,3];
}
}
}
}
export default class LineDemo extends Component {
render() {
return (
<div>
<h2>Line Example</h2>
<Line ref="chart" data={data} options={options}/>
</div>
);
}
}
我的问题是我想在点悬停时添加一些数据。我有一个这样的额外数组:[2,3] 代表对象的年龄,我也希望在我悬停在一个点上时看到这个。
请查看下面的图片以获得更好的解释。
我浏览了 chartjs documentation,但似乎找不到解释。 任何帮助将不胜感激!
解决方法
您可能正在寻找这样的功能:
var chart = new Chart(ctx,{
type: 'line',data: data,options: {
tooltips: {
callbacks: {
label: function(tooltipItem,data) {
var label = data.datasets[tooltipItem.datasetIndex].label || '';
if (label) {
label += ': ';
}
label += Math.round(tooltipItem.yLabel * 100) / 100;
return label;
}
}
}
}
});
此功能在 the official doc 中有详细列出和描述。你可能只是忽略了它。请看:
Label Callback · Tooltip · Chart.js
标签回调可以更改为给定数据点显示的文本。四舍五入数据值的常见示例;以下示例将数据四舍五入到两位小数。
(见上面的代码块)
Frohes Neues!
编辑:
您可以传递图表选项,就像您可以将数据传递给 React 的 ChartJS 一样。
它看起来像这样:<Line ref="chart" data={data} options={options} />
。
有关更多信息,请参阅:How to set options in react-chartjs-2?
,您需要传递类似此示例的工具提示选项:https://codesandbox.io/s/cool-feather-85xfi?file=/src/App.js:2175-2213,然后在 bodyLines.forEach(function (body,i)
中自定义您的工具提示
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。