y 轴上的股票图表值正在四舍五入

Question

我有一张正在显示的图表，但 y 轴上的值四舍五入到小数点后一位，但我希望它转到小数点后两位。当您将鼠标悬停在图表的不同部分时，输入图表的数据有 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", 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);

Answer 1

change 值在您提供的数据样本中处于 0 - 4 范围内。因此，图表在 yAxis [0, 1.5, 3, 4.5] 上显示刻度和标签。在这种情况下，图表往往会显示漂亮的圆形刻度。如果您要显示刻度值 3 或 1.5，则无需显示 6 位数字。如果您的数据范围类似于 2.111111 - 2.111122，则 yAxis 标签格式化程序函数将不包含四舍五入的值。然后显示所有 6 位数字以显示此范围内的刻度将是有意义的。无论如何，如果您真的需要显示一组特定的刻度，您可以使用 ticks() function.

手动应用它们

Answer 2

好的，知道了！在十字准线标签格式化程序的上下文中，您可以找到 rawValue 字段，其中不包含四舍五入的值。为此，您应该使用它，而不是 value 字段。像这样：

chart.crosshair().yLabel().format(function() {
  console.log(this.rawValue);
  return this.rawValue;
});

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

y 轴上的股票图表值正在四舍五入

Stock Chart values on the y axis are being rounded

anychart