关于全局配置问题

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <title></title>
    <script src="https://cdn.bootcss.com/Chart.js/2.5.0/Chart.js"></script>
</head>

<body>
    <canvas id="barChart"></canvas>
    <script type="text/javascript">
    var ctx = document.getElementById('barChart').getContext("2d");
    var labels = [];
    var datasets = [];
    var options = {};


    // 全局配置GlobalConfiguration
    // Chart.defaults.global.responsive = true;
    Chart.defaults.global.title = {
        display: true,
        text: "图表标题",
        position: 'bottom'
    };

    // 是否显示title   设置title内容
    // Chart.defaults.global.title.display = true;
    // Chart.defaults.global.title.text = "图表标题";



    labels = ["北京", "上海", "广州", "深圳", "天津", "广州", "济南"];
    datasets[0] = {
        label: "第一季度",
        backgroundColor: [
            "rgba(255,204,204,.7)",
            "rgba(210,204,255,.7)",
            "rgba(204,255,224,.7)",
            "rgba(214,237,237,.7)",
            "rgba(235,224,255,.7)",
            "rgba(255,245,204,.7)",
            "rgba(255,236,217,.7)"
        ],
        data: [60, 50, 90, 80, 50, 15, 35]
    };
    datasets[1] = {
        label: "第二季度",
        backgroundColor: [
            "rgba(255,204,243,.7)",
            "rgba(215,238,251,.7)",
            "rgba(204,255,245,.7)",
            "rgba(219,232,242,.7)",
            "rgba(235,236,255,.7)",
            "rgba(255,255,204,.7)",
            "rgba(244,253,221,.7)"
        ],
        data: [90, 40, 30, 10, 20, 25, 30],
    };

    // options = {
    //     title: {
    //         display: true,
    //         text: '2017年上半年web前端收入比例',
    //     }
    // };

    // barChart
    var barChart = new Chart(ctx, {
        type: 'bar',
        data: {
            labels: labels,
            datasets: datasets
        },
        options: options
    });
    </script>
</body>

</html>

全局配置例如title参数能否合并成title对象一起写？

NeverBy 2019-09-26

源自：HTML5 Canvas 插件 3-5 通过全局配置图表

收起

2回答

好帮手慕慕子 2019-09-26 15:59:52

同学你好，

1. 是的，全局配置的话，需要分开写

// Chart.defaults.global.title.display = true; 
// Chart.defaults.global.title.text = "图表标题"; 
// Chart.defaults.global.title.position = 'bottom';

2. 可以在官方文档查阅更多的详细内容 https://www.chartjs.org/docs/latest/

3. 也可以参考课程中提供的资料哦

如果帮助到了你，欢迎采纳！

祝学习愉快~~~

收起回答

好帮手慕慕子 2019-09-26 12:01:35

同学你好，你的这种写法全局配置GlobalConfiguration是不可以的。

如果想要将title作为对象，可以放在options对象中，示例：

效果图：

同学可以自己下去测试一下哦

如果帮助到了你，欢迎采纳！

祝学习愉快~~~~

收起回答

提问者 NeverBy #1

如果title全局设置是不是只有 // Chart.defaults.global.title.display = true; // Chart.defaults.global.title.text = "图表标题"; // Chart.defaults.global.title.position = 'bottom'; 这一种写法吧？还有个问题：这个options设置里面这些：scales，yAxes，ticks，legend。该看文档的哪些部分 options: { scales: { yAxes: [{ ticks: { beginAtZero: true } }] }, legend: { display: true, position: 'bottom', labels: { boxWidth: 80, fontColor: 'rgb(60, 180, 100)' } } }

2019-09-26 14:58:50