Csv 画布:直线而非规则图形
使用CanvaJs,我只得到一条直线,而不是一个规则的图形。请问代码中有什么错误 这是.csv文件的外观:Csv 画布:直线而非规则图形,csv,canvas,Csv,Canvas,使用CanvaJs,我只得到一条直线,而不是一个规则的图形。请问代码中有什么错误 这是.csv文件的外观: course_id,userid_DI,registered,viewed,explored,certified,final_cc_cname_DI,LoE_DI,YoB,gender,grade,start_time_DI,last_event_DI,nevents,ndays_act,nplay_video,nchapters,nforum_posts,roles,incomplete
course_id,userid_DI,registered,viewed,explored,certified,final_cc_cname_DI,LoE_DI,YoB,gender,grade,start_time_DI,last_event_DI,nevents,ndays_act,nplay_video,nchapters,nforum_posts,roles,incomplete_flag
LavalX/CB22x/2013_Spring,MHxPC130442623,1,0,0,0,United States,NA,NA,NA,0,2012-12-19,2013-11-17,,9,,,0,,1
LavalX/CS50x/2012,MHxPC130442623,1,1,0,0,United States,NA,NA,NA,0,2012-10-15,,,9,,1.0,0,,1
LavalX/CB22x/2013_Spring,MHxPC130275857,1,0,0,0,Canada,NA,NA,NA,0,2013-02-08,2013-11-17,,16,,,0,,1
LavalX/CS50x/2012,MHxPC130275857,1,0,0,0,United States,NA,NA,NA,0,2012-09-17,,,16,,,0,,1
LavalX/ER22x/2013_Spring,MHxPC130275857,1,0,0,0,France,NA,NA,NA,0,2012-12-19,,,16,,,0,,1
我试图显示第11列的X轴数据(开始时间)和第3列的Y轴数据(已注册)
我正在尝试绘制每个日期的注册数量
这就是代码:
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script type="text/javascript" src="jquery-2.1.4.js"></script>
<script type="text/javascript">
$(document).ready(function ()
{
$.ajax({
type: "GET",
url:"figure2.csv",
dataType: "text",
success: function(data) {processData(data);}
});
function processData( allText )
{
var allLinesArray = allText.split("\n");
if( allLinesArray.length > 0 )
{
var dataPoints = [];
for (var i = 0; i <= allLinesArray.length-1; i++)
{
var rowData = allLinesArray[i].split(",");
dataPoints.push({ label:rowData[11], y:parseInt(rowData[2]) });
}
drawChart(dataPoints);
}
}
function drawChart(dataPoints)
{
var chart = new CanvasJS.Chart("chartContainer",
{
theme: "theme2", //theme1
title:
{
text: "Charts"
},
axisX:
{
labelAngle: 90,
labelWrap:true,
labelAutoFit: false,
labelFontSize: 15,
labelMaxWidth: 200,
labelFontColor: "black"
},
axisY:
{
//interval: 200,
labelAngle: 0,
labelWrap:true,
labelAutoFit: false,
labelFontSize: 15,
labelMaxWidth: 200,
labelFontColor: "black"
},
animationEnabled: false, // change to true
zoomEnabled:true,
data: [
{
// Change type to "bar", "splineArea", "area", "spline", "pie",etc.
type: "line",
//type: "column",
indexLabelPlacement: "outside",
indexLabelFontWeight: "bold",
indexLabelFontColor: "black",
dataPoints: dataPoints
}
]
});
chart.render();
}
});
</script>
<script type="text/javascript" src="canvasjs.min.js"></script>
</head>
<body style="background-color: #ADB68B; background-image:url(../Images/bg_body_new.png); background-repeat: repeat-x;text-align:center">
<div id="chartContainer" style="height: 800px; width: 100%; background-image:url("fonto1.png"); background-repeat:no-repeat; background-position:center; background-size:100% 100%"></div>
<div style="text-align: center; color:red; font-size:25px;"><b>Figure</b></div>
</body>
</html>
$(文档).ready(函数()
{
$.ajax({
键入:“获取”,
url:“figure2.csv”,
数据类型:“文本”,
成功:函数(数据){processData(数据);}
});
函数processData(allText)
{
var allLinesArray=allText.split(“\n”);
如果(allLinesArray.length>0)
{
var数据点=[];
对于(var i=0;i我已使用您的数据/代码创建了一个,它似乎工作正常。正如您所看到的,第3列中的所有值都等于一。如果预期的图表不是直线,请确保您提供了正确的
data.dataPoints.push({
label: rowData[11],
y: parseInt(rowData[2])
});
我已经用您的数据/代码创建了一个图表,它似乎运行良好。正如您所看到的,第3列中的所有值都等于一。如果预期的图表不是直线,请确保您提供了正确的
data.dataPoints.push({
label: rowData[11],
y: parseInt(rowData[2])
});
谢谢Naveen。你说得对。我得到的是直线,因为rowData[2]的值等于1。由于我使用.csv文件作为数据源,是否可以对rowData[2]的值进行分组按日期我想在图表上显示每天的注册数?谢谢。@user5293879这里有一个相同的方法。谢谢Naveen。你说得对。我得到的是直线,因为rowData[2]的值等于1。由于我使用.csv文件作为数据源,是否可以对rowData[2]的值进行分组“按日期”我想在图表上显示每天的注册数?谢谢。@user5293879这里有一个相同的方法。