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

发布于 2022-09-04 05:40:15 字数 2942 浏览 30 评论 0

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

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

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

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

☆獨立☆ 2022-09-11 05:40:15

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

回复收藏 0

泡沫很甜 2022-09-11 05:40:15

这个 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

~没有更多了~