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

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

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

---

图表要求为y提供一个数字。
如果提供了字符串，它将尝试使用

parseFloat

或类似方法将其解析为数字。
这就是数字四舍五入的原因

parseFloat('8:50 AM') = 8

因此，如果您有类似于

'1:00pm'

的内容，您将无法获得所需的行

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

我们可以通过创建包含日期和时间的新日期来完成此操作。
然后用日期部分创建另一个日期，并从上一个日期中减去它

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

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

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

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

请参阅以下工作片段

$（文档）.ready（函数（）{
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'}]；
var spark1={
图表：{
id:‘sparkline1’，
键入：“行”，
身高：200，
闪光：{
已启用：true
},
小组：“迷你们”
},
系列：[{
名称：“唤醒时间”，
数据：chartData.map（函数（行）{
//创建完整日期时间
var rowDate=新日期（第x行+第y行）；
//仅从完整日期时间中减去日期
var rowTime=rowDate.getTime（）-（新日期（row.x））.getTime（）；
//返回新数据点
返回{x:row.x，y:rowTime}；
})
}],
工具提示：{
x:{
节目：假
},
y:{
格式化程序：函数（值，系列）{
//使用系列参数从图表数据中提取原始字符串
返回chartData[series.dataPointIndex].y；
}
}
}
};
var图表=新的ApexCharts(
document.getElementById（'sparkline1'），
spark1
);
chart.render（）；
});

我想以字符串格式显示y值的完整时间（'8:50 AM'，'11:00 AM'，'9:02 AM'，'10:47 AM'），但它们在工具提示中显示为四舍五入的数字（'8'，'11''9'，'10'）。我在上面添加了其余的图表代码。谢谢你的关注！非常感谢您的解释和代码！这是有道理的，而且有效！