Question

我想提一个饼图聊天，数据来自csv文件（excel）。我有html文件（index.html）和js文件（loadData2.js），当我在js文件中打印数据时，我得到它：word，number 唐纳德，8 王牌，12 拒绝，2 至7 发布，3 他的，6

所以我看到数据没问题。一个字段是一个字，另一个是数字。

我收到错误：“未捕获TypeError：$（...）。CanvasJSChart不是函数（...）”

我的HTML代码：

<!DOCTYPE html>
<html>
<head>
    <title>hw 1</title>
    <link rel="stylesheet" type="text/css" href="css/style.css">
    <script src="includes/loadData2.js"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
    <script src="canvas/canvasjs.min.js"></script>
</head>
    <body>
    <div id="chartContainer" style="height: 300px; width: 100%;">
        <script>
        (function(){
            getData2();
        })();
        </script>
        </div>
    </body>
</html>

我的js代码：

function getData2()
{
    console.log("hello");
$.get('data/words.csv', function(data) {
    console.log(data);
    //Better to construct options first and then pass it as a parameter
  var options = {
    exportEnabled: true,
                animationEnabled: true,
    title: {
      text: "Exporting Chart as Image"
    },
    data: [
    {
      type: "splineArea", //change it to line, area, bar, pie, etc
      dataPoints: [data]
    }
    ]
  };
  $("#chartContainer").CanvasJS.Chart(options);
});

}

我需要做些什么才能在屏幕上看到我的图表？谢谢，

Answer 1

您正在使用CanvasJs，并尝试使用其jQuery插件。

用正确的文件替换<script src="canvas/canvasjs.min.js"></script>，它就能正常工作。

<script src="https://cdnjs.cloudflare.com/ajax/libs/canvasjs/1.7.0/jquery.canvasjs.min.js"></script>

使用常规库创建图表将如下所示：

var options = {
    exportEnabled: true,
                animationEnabled: true,
    title: {
      text: "Exporting Chart as Image"
    },
    data: [
    {
      type: "splineArea", //change it to line, area, bar, pie, etc
      dataPoints: [data]
    }
    ]
  };

  var chart = new CanvasJS.Chart("chartContainer",options);
  chart.render

无法读取未定义的属性“图表”

1 个答案: