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;
});

因此，您可以根据需要完全舍入或格式化原始值。