如何解决如何在react-chartjs-2中处理数据
我想像工具提示中那样在突出显示的区域中以特定的货币符号在y轴上显示数据。我已自定义工具提示,但提供给图形的动态数据不受我控制。
这是我尝试过的代码
<Line
ref="chart"
data={ {
labels: ["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"],datasets: [
{
label: "",fill: false,lineTension: 0,backgroundColor: "rgba(75,192,0.4)",borderColor: "#71C898",borderCapStyle: "butt",borderDash: [],borderDashOffset: 0.0,borderJoinStyle: "miter",pointBorderColor: "#71C898",pointBackgroundColor: "#2D9A5E",pointBorderWidth: 1,pointHoverRadius: 5,pointHoverBackgroundColor: "#71C898",pointHoverBorderColor: "rgba(220,220,1)",pointHoverBorderWidth: 2,poinTradius: 5,pointHiTradius: 10,data: this.props.data.length > 0 ? this.props.data : [],}],}}
height={ 200 }
options={ {
tooltips: {
callbacks: {
label: (tooltipItems,data) => {
return `${currencyFormatter(tooltipItems.value)}`
}
}
}
}}
/>
解决方法
Y轴的格式可以设置为==比例=> yAxis =>刻度。在那里,您可以使用工具提示以相同的样式设置标签格式。
options={
{
tooltips: {
callbacks: {
label: (tooltipItems,data) => {
return `${currencyFormatter(tooltipItems.value)}`
}
}
},scales:{
yAxes:[
{
ticks: {
callback: function(label,index,labels) {
return `${currencyFormatter(label)}`
}
},}
]
}
}
}
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。