搜尋

首頁  >  問答  >  主體

javascript - chart.js绘制图表时为何报错options is not defined?

第一次使用这个插件,一引入就出问题了,代码:

<!DOCTYPE html>
<html lang="en">

    <head>
        <meta charset="utf-8">
        <!--<script type="text/javascript" src="../js/chart.min.js"></script>-->
        <script src="../js/Chart.js"></script>
        <style>
            html,
            body {
                margin: 0;
                padding: 0;
                width: 100%;
                height: 100%;
            }
        </style>
    </head>

    <body>
        <canvas id="myChart"></canvas>
        <script>
            var ctx = document.getElementById("myChart").getContext("2d");
            //new Chart(ctx).PolarArea(data,options);
            var data = {
                labels : ["January","February","March","April","May","June","July"],
                datasets : [{
                    fillColor : "rgba(220,220,220,0.5)",
                    strokeColor : "rgba(220,220,220,1)",
                    pointColor : "rgba(220,220,220,1)",
                    pointStrokeColor : "#fff",
                    data : [65,59,90,81,56,55,40]
                },{
                    fillColor : "rgba(151,187,205,0.5)",
                    strokeColor : "rgba(151,187,205,1)",
                    pointColor : "rgba(151,187,205,1)",
                    pointStrokeColor : "#fff",
                    data : [28,48,40,19,96,27,100]
                }]
            }
            new Chart(ctx).PolarArea(data,options);//一调用就报错 Uncaught ReferenceError: options is not defined
        </script>
    </body>

</html>

这个参数options是代表什么?怎么解决这个问题?
ps:这个问题是不是很low啊?为什么网上都没有的?这个options参数没有被这个插件封装?我第一次用着插件,也没去看他的源代码,大神们不吝赐教

如果我按照网上某些demo的方式,将这个options参数设为图表默认参数这个对象,则:

var ctx = document.getElementById("myChart").getContext("2d");
var defaults = {    
    scaleStartValue :null,     // Y 轴的起始值
    scaleLineColor : "rgba(0,0,0,.1)",    // Y/X轴的颜色
    ... //其他的一些设置
    }
var data = {
                labels : ["January","February","March","April","May","June","July"],
                datasets : [{
                    fillColor : "rgba(220,220,220,0.5)",
                    strokeColor : "rgba(220,220,220,1)",
                    pointColor : "rgba(220,220,220,1)",
                    pointStrokeColor : "#fff",
                    data : [65,59,90,81,56,55,40]
                },{
                    fillColor : "rgba(151,187,205,0.5)",
                    strokeColor : "rgba(151,187,205,1)",
                    pointColor : "rgba(151,187,205,1)",
                    pointStrokeColor : "#fff",
                    data : [28,48,40,19,96,27,100]
                }]
            }
        
        new Chart(ctx).PolarArea(data,defaults); //报错:Uncaught TypeError: (intermediate value).PolarArea is not a function
        
        

我去,这是要坑死人的节奏啊,到底是哪里的问题?

巴扎黑巴扎黑2790 天前1146

全部回覆(2)我來回復

  • 阿神

    阿神2017-04-11 09:49:29

    new Chart(ctx).PolarArea(data,options);
    这里面的options定义了吗?

    回覆
    0
  • 怪我咯

    怪我咯2017-04-11 09:49:29

    这个 option 是指你的数据 比如这样

    option = {
        title : {
            text: '未来一周气温变化',
            subtext: '纯属虚构'
        },
        tooltip : {
            trigger: 'axis'
        },
        legend: {
            data:['最高气温','最低气温']
        },
        toolbox: {
            show : true,
            feature : {
                mark : {show: true},
                dataView : {show: true, readOnly: false},
                magicType : {show: true, type: ['line', 'bar']},
                restore : {show: true},
                saveAsImage : {show: true}
            }
        },
        calculable : true,
        xAxis : [
            {
                type : 'category',
                boundaryGap : false,
                data : ['周一','周二','周三','周四','周五','周六','周日']
            }
        ],
        yAxis : [
            {
                type : 'value',
                axisLabel : {
                    formatter: '{value} °C'
                }
            }
        ],
        series : [
            {
                name:'最高气温',
                type:'line',
                data:[11, 11, 15, 13, 12, 13, 10],
                markPoint : {
                    data : [
                        {type : 'max', name: '最大值'},
                        {type : 'min', name: '最小值'}
                    ]
                },
                markLine : {
                    data : [
                        {type : 'average', name: '平均值'}
                    ]
                }
            },
            {
                name:'最低气温',
                type:'line',
                data:[1, -2, 2, 5, 3, 2, 0],
                markPoint : {
                    data : [
                        {name : '周最低', value : -2, xAxis: 1, yAxis: -1.5}
                    ]
                },
                markLine : {
                    data : [
                        {type : 'average', name : '平均值'}
                    ]
                }
            }
        ]
    };
                        

    回覆
    0
  • 取消回覆