Apex 图表工具提示格式化程序：如何将数字转换为字符串

Question

我试图在工具提示（apexcharts）中显示折线图的 y 值。原始数据在{'8:50 AM', '11:00 AM', '9:02 AM'...}系列中以字符串格式设置，但它们显示为'8', '11', '9 '...在工具提示中，以数字格式四舍五入。我不明白为什么字符串数据会自行转换和舍入。我使用“toString”在工具提示格式化程序中显示全文（“8:50 AM”、“11:00 AM”、“9:02 AM”...），但它不起作用。有什么建议吗？

var spark1 = {
  chart: {
    id: 'sparkline1',
    type: 'line',
    height: 200,
    sparkline: {
      enabled: true
    },
    group: 'sparklines'
  },
  series: [{
    name: 'wake-up time',
    data: [{x: '05/06/2014', y:'8:50 AM'}, {x: '05/07/2014', y:'11:00 AM'}, {x: '05/08/2014', y:'9:02 AM'}, {x: '05/09/2014', y:'10:47 AM'}]
  }],
  tooltip: {
    x: {
      show: false
    },
    y: {
      formatter: function(value){
      return value.toString();
       }
    }
  }
 }
}

Answer 1

该图表期望为 y 提供一个数字。
如果提供了一个字符串，它将尝试使用parseFloat或类似的东西将其解析为数字。
这就是数字四舍五入的原因。

parseFloat('8:50 AM') = 8

所以如果你有类似的东西'1:00 PM'，你将不会得到想要的线路。

相反，将这些值转换为真实日期，然后提取时间值。

我们可以通过创建一个包含日期和时间的新日期来做到这一点。
然后创建另一个仅包含日期部分的日期，并从前一个日期中减去它。

我们将把图表数据保存在一个变量中。

var chartData = [{x: '05/06/2014', y: '8:50 AM'}, {x: '05/07/2014', y: '11:00 AM'}, {x: '05/08/2014', y: '9:02 AM'}, {x: '05/09/2014', y: '10:47 AM'}];

然后将其映射到图表中。

  data: chartData.map(function (row) {
    // create full date time
    var rowDate = new Date(row.x + ' ' + row.y);

    // subtract date only from full date time
    var rowTime = rowDate.getTime() - (new Date(row.x)).getTime();

    // return new data point
    return {x: row.x, y: rowTime};
  })

至于工具提示，我们可以使用系列参数从原始数据中提取索引......

    formatter: function(value, series) {
      // use series argument to pull original string from chart data
      return chartData[series.dataPointIndex].y;
    }

请参阅以下工作片段...

parseFloat('8:50 AM') = 8

var chartData = [{x: '05/06/2014', y: '8:50 AM'}, {x: '05/07/2014', y: '11:00 AM'}, {x: '05/08/2014', y: '9:02 AM'}, {x: '05/09/2014', y: '10:47 AM'}];