anychart - y 轴上的股票图表值正在四舍五入
问题描述
我有一个要显示的图表,但 y 轴上的值被四舍五入到小数点后 1 位,但我希望它到小数点后 2 位。当您将鼠标悬停在图表的不同部分时,您可以在图例中看到,输入图表的数据有 6 个小数位。如何防止舍入或指定要舍入的小数位数?我已经包含了一个数据样本,因为整个数据集超过 1000 行。完整的数据集在 codepen 中。
谢谢
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", nav_code: "2039", amount: "10.000000", change: 0 },
{
date: "2019-12-16",
nav_code: "2039",
amount: "10.208000",
change: 2.037618
},
{
date: "2019-12-17",
nav_code: "2039",
amount: "10.236000",
change: 2.305588
},
{
date: "2019-12-18",
nav_code: "2039",
amount: "10.248000",
change: 2.419984
},
{
date: "2019-12-19",
nav_code: "2039",
amount: "10.264000",
change: 2.572097
},
{
date: "2019-12-20",
nav_code: "2039",
amount: "10.284000",
change: 2.761571
},
{
date: "2019-12-23",
nav_code: "2039",
amount: "10.292000",
change: 2.837155
},
{
date: "2019-12-24",
nav_code: "2039",
amount: "10.292000",
change: 2.837155
},
{
date: "2019-12-26",
nav_code: "2039",
amount: "10.312000",
change: 3.025601
},
{
date: "2019-12-27",
nav_code: "2039",
amount: "10.324000",
change: 3.138318
},
{
date: "2019-12-30",
nav_code: "2039",
amount: "10.300000",
change: 2.912621
},
{
date: "2019-12-31",
nav_code: "2039",
amount: "10.316000",
change: 3.063203
},
{
date: "2020-01-02",
nav_code: "2039",
amount: "10.368000",
change: 3.549383
},
{
date: "2020-01-03",
nav_code: "2039",
amount: "10.350799",
change: 3.389101
},
{
date: "2020-01-06",
nav_code: "2039",
amount: "10.339216",
change: 3.280868
},
{
date: "2020-01-07",
nav_code: "2039",
amount: "10.328300",
change: 3.178645
},
{
date: "2020-01-08",
nav_code: "2039",
amount: "10.339970",
change: 3.287921
},
{
date: "2020-01-09",
nav_code: "2039",
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
如果您要显示刻度值或,则无需显示 6 位数字1.5
。如果您的数据范围类似于 2.111111 - 2.111122,则 yAxis 标签格式化程序函数将包含不四舍五入的值。然后显示所有 6 个数字来演示此范围内的刻度是有意义的。无论如何,如果您真的需要显示一组特定的刻度,您可以使用ticks() 函数手动应用它们。
推荐阅读
- c# - 在 Xamarin Android C# 中将 SQLite 数据库备份和还原到 sdcard
- excel - 在excel中合并两行,并在最后一列旁边移动一列
- php - 在 Laravel 中将多个数据一次保存到数据库中
- rust - 将 Unix 套接字与 socket2 一起使用
- java - 如何仅将对象的几个字段用于 REST 服务
- selenium - 使用 Selenium、IEDriverServer 通过 Java 执行测试时出现“IE 驱动程序的命令行服务器已停止工作”错误
- python-3.x - Tkinter 网格传播和滚动条
- hyperledger-fabric - Hyperledger Fabric 1.2 服务发现无法在启用 TLS 的情况下工作
- wordpress - Avada 自定义 CSS 设置未生效
- unity3d - ARCore如何在Unity中设置点云