Question

使用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_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轴数据上显示

我试图绘制每个日期的注册数量。

这就是代码：

<!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>

谢谢。

Answer 1

我已经使用您的数据/代码创建了一个jsfiddle，它似乎工作正常。如您所见，第3列中的所有值都等于1。如果预期图表不是直线，请确保您提供正确的

data.dataPoints.push({
                label: rowData[11],
                y: parseInt(rowData[2])
            });

CanvasJs：直线而不是常规图

1 个答案: