CanvasJs：直线而不是常规图 [英] CanvasJs: straight line rather than regular graph
问题描述
使用CanvaJs，我只是得到一条直线而不是一个常规图。
Using CanvaJs, I just get a straight line rather than a regular graph. What is wrong in the code please?
这是.csv文件的样子：
This is what the .csv file look like:
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（start_time_DI）的X轴数据和列3（注册）的Y轴数据上显示
I'm trying to display on X axis data of column 11 (start_time_DI) and on Y axis data of column 3 (registered)
我试图绘制每个日期的注册数量。
I am trying to draw the number of registration per date.
这是代码：
<!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>
谢谢。
推荐答案
我已经使用您的数据/代码创建了 jsfiddle ，它似乎工作正常。您可以看到第3列中的所有值都等于1。
I have created a jsfiddle with your data/code and it seems to be working fine. As you can see all values in column 3 are equal to one. In case the expected chart is not straight line, make sure that you are providing the right
data.dataPoints.push({
label: rowData[11],
y: parseInt(rowData[2])
});
这篇关于CanvasJs：直线而不是常规图的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
