如何解决y 轴上的股票图表值正在四舍五入
我有一个正在显示的图表,但 y 轴上的值四舍五入到小数点后 1 位,但我希望它保留到小数点后 2 位。输入图表的数据有 6 个小数位,当您将鼠标悬停在图表的不同部分时,您可以在图例中看到。如何防止它四舍五入或指定要四舍五入的小数位数?我已经包含了一个数据样本,因为全套数据超过 1000 行。完整的数据集在代码笔中。
谢谢
https://codepen.io/akrug23/pen/dyXjYdO
let data = {
count: 226,results: [
{ date: "2019-12-12",nav_code: "2039",amount: "10.000000",change: 0 },{ date: "2019-12-13",{
date: "2019-12-16",amount: "10.208000",change: 2.037618
},{
date: "2019-12-17",amount: "10.236000",change: 2.305588
},{
date: "2019-12-18",amount: "10.248000",change: 2.419984
},{
date: "2019-12-19",amount: "10.264000",change: 2.572097
},{
date: "2019-12-20",amount: "10.284000",change: 2.761571
},{
date: "2019-12-23",amount: "10.292000",change: 2.837155
},{
date: "2019-12-24",{
date: "2019-12-26",amount: "10.312000",change: 3.025601
},{
date: "2019-12-27",amount: "10.324000",change: 3.138318
},{
date: "2019-12-30",amount: "10.300000",change: 2.912621
},{
date: "2019-12-31",amount: "10.316000",change: 3.063203
},{
date: "2020-01-02",amount: "10.368000",change: 3.549383
},{
date: "2020-01-03",amount: "10.350799",change: 3.389101
},{
date: "2020-01-06",amount: "10.339216",change: 3.280868
},{
date: "2020-01-07",amount: "10.328300",change: 3.178645
},{
date: "2020-01-08",amount: "10.339970",change: 3.287921
},{
date: "2020-01-09",amount: "10.386636",change: 3.722437
}
]
};
function createStockChart(chartContainerID,rangeContainerID,data) {
var percentageChange = anychart.data.table("date");
percentageChange.addData(data);
var navs = anychart.data.table("date");
navs.addData(data);
// Init stock chart
var chart = anychart.stock();
//Set animations
chart.animation(true,5000);
//Remove the credits
chart.credits().enabled(false);
//Set chart settings
var plot = chart.plot();
plot
.line()
.data(
percentageChange.mapAs({
value: "change"
})
)
.name("% Change")
.fill("#99328e")
.stroke("#99328e")
.tooltip(false);
plot.yAxis().labels().format(function() {
return this.value.toFixed(2);
});
chart.crosshair(true);
chart.crosshair().yLabel().format(function() {
return this.value.toFixed(2);
});
//format the legend
var legend = plot.legend();
//enable legend
legend.enabled(true);
//remove the title
legend.titleFormat(false);
//format item in legend
legend.useHtml(true);
legend.itemsFormat("% Change: {%value}");
//Disable the scroller
chart.scroller().enabled(false);
//Set container for chart and draw chart
chart.container(chartContainerID);
chart.draw();
}
createStockChart("stock-chart","stock-chart-range-selector",data.results);
解决方法
在您提供的数据样本中,change
值的范围是 0 - 4。因此,图表在 yAxis [0,1.5,3,4.5] 上显示刻度和标签。在这种情况下,图表往往会显示出漂亮的圆形刻度。如果您要显示刻度值 3
或 1.5
,则无需显示 6 位数字。如果您的数据范围类似于 2.111111 - 2.111122,则 yAxis 标签格式化程序函数将包括未舍入的值。然后显示所有 6 位数字以演示此范围内的刻度是有意义的。
无论如何,如果您确实需要显示一组特定的刻度,您可以使用 ticks() function 手动应用它们。
好的,知道了!在十字线标签格式器的上下文中,您可以找到包含未舍入值的 rawValue
字段。您应该为此目的使用它,而不是 value
字段。像这样:
chart.crosshair().yLabel().format(function() {
console.log(this.rawValue);
return this.rawValue;
});
因此,您可以根据需要完全舍入或格式化原始值。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。