javascript - 制作 CanvasJS 图表时出现“未捕获的 SyntaxError:无效日期”错误
问题描述
我在制作 CanvasJS 图表时遇到问题。“未捕获的语法错误:无效日期”出现。
我正在从 csv 文件中获取数据。此文件中的数据如下所示:
2020-07-11T23:11:52,23.45
2020-07-14T21:06:39,25.02
2020-07-14T21:08:05,25.07
2020-07-14T21:10:00,25.13
2020-07-14T21:12:10,25.04
我也想做日期选择器,但图表不想出现。
getData()
var dataPoints = [];
var xlabels = [];
var chart;
chart = new CanvasJS.Chart("chartContainer",
{
title: {
text: "Chart "
},
data: [
{
type: "line",
dataPoints: xlabels
}
]
});
chart.render();
var axisXMin = chart.axisX[0].get("minimum");
var axisXMax = chart.axisX[0].get("maximum");
async function getData(){
var response =await fetch('data.csv');
var data = await response.text();
var table = data.split('\n').slice(1);
table.forEach(row =>{
var columns = row.split(',');
var date = new Date(columns[0]);
var xValue = date;
var yValue = columns[1];
xlabels.push(date);
dataPoints.push({
x: xValue,
y: yValue
});
});
}
$( function() {
$("#fromDate").val(CanvasJS.formatDate(axisXMin, "DD MMM YYYY"));
$("#toDate").val(CanvasJS.formatDate(axisXMax, "DD MMM YYYY"));
$("#fromDate").datepicker({dateFormat: "d M yy"});
$("#toDate").datepicker({dateFormat: "d M yy"});
});
$("#date-selector").change( function() {
var minValue = $( "#fromDate" ).val();
var maxValue = $ ( "#toDate" ).val();
if(new Date(minValue).getTime() < new Date(maxValue).getTime()){
chart.axisX[0].set("minimum", new Date(minValue));
chart.axisX[0].set("maximum", new Date(maxValue));
}
});
$(".period").click( function() {
var period = this.id;
var minValue;
minValue = new Date(axisXMax);
switch(period){
case "1m":
minValue.setMonth(minValue.getMonth() - 1);
break;
case "3m":
minValue.setMonth(minValue.getMonth() - 3);
break;
case "6m":
minValue.setMonth(minValue.getMonth() - 6);
break;
case "1y":
minValue.setYear(minValue.getFullYear() - 1);
break;
default:
minValue = axisXMin;
}
chart.axisX[0].set("minimum", new Date(minValue));
chart.axisX[0].set("maximum", new Date(axisXMax));
});
#update-nav {
width: 100%;
height: 30px;
}
#range-selector {
width: 50%;
float: left;
}
#date-selector {
width: 50%;
float: right;
}
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<br/><!-- Just so that JSFiddle's Result label doesn't overlap the Chart -->
<div id="update-nav">
<div id="range-selector">
<input type="button" id="1m" class="period ui-button" value="1m" />
<input type="button" id="3m" class="period ui-button" value="3m"/>
<input type="button" id="6m" class="period ui-button" value="6m"/>
<input type="button" id="1y" class="period ui-button" value="1y"/>
<input type="button" id="all" class="period ui-button" value="All"/>
</div>
<div id="date-selector" class="">
From:<input type="text" id="fromDate" class="ui-widget">
To:<input type="text" id="toDate" class="ui-widget">
</div>
</div>
<br/>
<div id="chartContainer" style="height: 360px; width: 100%;"></div>
解决方案
问题已解决:
将数据点更改为其他内容并在数据点中使用它,并使用 parseFloat() 解析 y 值以浮动,并在 getData() 中渲染图表在您的情况下应该可以正常工作。
var dps = []; var xlabels = [];
var chart;
chart = new CanvasJS.Chart("chartContainer",{
title: {
text: "Chart with Date Selector"
},
data: [
{
type: "line",
dataPoints: dps
}
]
});
var axisXMin, axisXMax;
async function getData(){
var response =await fetch('data.csv');
var data = await response.text();
var table = data.split('\n').slice(1);
table.forEach(row =>{
var columns = row.split(',');
var date = new Date(columns[0]);
var xValue = date;
var yValue = parseFloat(columns[1]);
console.log(columns[0]);
xlabels.push(date);
dps.push({
x: xValue,
y: yValue
});
推荐阅读
- c# - 如何使用 AppService 构建和打包 UWP 项目?
- ssh - ssh tmux:以编程方式使用 ssh 执行长时间运行的命令
- here-api - 将 NMA 应用程序 ID、应用程序代码和许可证密钥存储在自己的数据库中,而不是在 AppDelegate 中硬编码值
- git - 'git branch -a' 缺少分支,但显示为 'git ls-remote origin'
- php - SELECT * FROM table WHERE name LIKE "'.search_variable.' “不起作用
- javascript - Form.io 自定义布局组件
- python - 复制列表更改原始列表(python)?
- sql - sql多次计数
- docker - 向工件添加新的密钥库会破坏现有的 https 连接
- c++ - 按方案排序矩阵