我正在尝试在工具提示(顶点)中显示折线图的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();
}
}
}
}
}
图表期望为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};
})
至于工具提示,我们可以使用series参数从原始数据中提取索引...
formatter: function(value, series) {
// use series argument to pull original string from chart data
return chartData[series.dataPointIndex].y;
}
请参阅以下工作片段...
$(document).ready(function() {
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 = {
chart: {
id: 'sparkline1',
type: 'line',
height: 200,
sparkline: {
enabled: true
},
group: 'sparklines'
},
series: [{
name: 'wake-up time',
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};
})
}],
tooltip: {
x: {
show: false
},
y: {
formatter: function(value, series) {
// use series argument to pull original string from chart data
return chartData[series.dataPointIndex].y;
}
}
}
};
var chart = new ApexCharts(
document.getElementById('sparkline1'),
spark1
);
chart.render();
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/apexcharts"></script>
<div id="sparkline1"></div>