javascript - 图表 js 饼图 : error in chart. js?

标签 javascript jquery charts

我正在尝试使用 Chart.js 测试饼图。我在 Chart.js 文件中收到“无法读取“长度”和“初始化”属性”的信息。我尝试了所有选项,但找不到问题所在。

jsfiddle中的代码

https://jsfiddle.net/n8ox2fqb/1/

enter image description here

pieChart.js 文件具有以下代码。

var   pieData = [
   {
      value: '25',
      label: 'Java',
      color: '#811BD6'
   },
   {
      value: '10',
      label: 'Scala',
      color: '#9CBABA'
   },
   {
      value: '30',
      label: 'PHP',
      color: '#D18177'
   },
   {
      value : '35',
      label: 'HTML',
      color: '#6AE128'
   }
]



var pieOptions = {};

$(document).ready(function() { 

    var ctxt = document.getElementById('myChart');
    var myPieChart = new Chart(ctxt,{
        type: 'pie',
        data: pieData,
        options: pieOptions
    });

});

HTML代码

<html lang="en">
    <head>
        <script src="src/jquery.min.js"></script>
        <script src="src/Chart.js"></script>
    </head>
            <Title>
                Test Pie Chart
            </Title>
    <body>
        <div>
            <div>
                 <canvas id="myChart" width="400" height="400"></canvas>
            </div>
        </div>
        <script src="pieChart.js"></script>
    </body>
</html>

最佳答案

我突然想说,我有一个明显的问题,那就是这条线

var ctxt = document.getElementById('myChart');

你想要

var ctxt = document.getElementById('myChart').getContext('2d');

您也可能以错误的格式提供图表数据。图表配置对象中的“数据”属性有一个名为“数据集”的属性,它是一个对象数组。 Check out their docs here

关于javascript - 图表 js 饼图 : error in chart. js?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/38661719/

相关文章:

charts - 刷新 Google 图表仪表板

javascript - 数据标签中的 Highcharts 系列名称

javascript - 仅当没有任何相同字符时,如何将字符添加到字符串中?

javascript - 无法从前端 JavaScript 访问跨源响应 header

javascript - 使用 setInterval 的多个实例

jquery - 检查 jQuery 中的选择器是否为空

javascript - 带有 .hide() 函数的 Jquery 代码在 Django 模板中不起作用

javascript - Google Chart - JSON 数据源项目作为图例字段 - 堆积列

javascript - JavaScript 中的方法重载

javascript - 我想将 JSON 值拆分为两个值