首页 文章

使用chart.js v2删除图表上的图例

提问于
浏览 次
81

我正在使用Bootstrap，JQuery和Chart.js（v2）制作主页 . 我让我的实现使用v1，但最近刚进入Bower并使用它下载了v2 .

我正在制作一个包含饼图的4列网格，但是v2中的缩放对我来说有点令人困惑 . 我希望图表能够快速响应，以便它们可以与平板电脑和智能手机等小型设备一起正确扩展，我的一个问题就是摆脱图表的图例以及将鼠标悬停在我的各个部分上时的悬停信息图表 .

index.html

<body>
    <div class="container">
        <div class="row">
            <div class="col-xs-3">
                <canvas id="chart1"></canvas>
            </div>
            <div class="col-xs-3">
                <canvas id="chart1"></canvas>
            </div>
            <div class="col-xs-3">
                <canvas id="chart1"></canvas>
            </div>
            <div class="col-xs-3">
                <canvas id="chart1"></canvas>
            </div>
        </div>
    </div>
</body>

functions.js

$(document).ready(function(){
    var canvas = $("#chart1");
    var data = {
        labels: [],
        datasets: [{
            data: [10, 10],
            backgroundColor: ["#F7464A", "#FDB45C"],
            hoverBackgroundColor: ["#FF5A5E", "#FFC870"]
        }]
    };

    var chart1 = new Chart(canvas, {
        type: "pie",
        data: data,
    });
});

如果我删除空的“标签”字段，则图表不再起作用 . 从它的外观来看，图表顶部有一个小间距，可以表明 Headers 是写的，但它们只是空字符串 .

有没有人知道如何删除图例和悬停描述？我根本无法理解如何使用它

我一有时间就会 grab 一个小伙伴！

编辑：链接到文档：https://nnnick.github.io/Chart.js/docs-v2/#getting-started

javascript jquery css charts chart.js2

2 回答

  • 195

    创建新的Chart对象时，可以将选项对象添加到图表中 .

    var chart1 = new Chart(canvas, {
    type: "pie",
    data: data,
    options: {
         legend: {
            display: false
         },
         tooltips: {
            enabled: false
         }
    }
});
    回复于
  • 39

    您可以在javascript文件中使用 Chart.defaults.global 更改选项 . 因此，您想要更改图例和工具提示选项 .

    删除图例

    Chart.defaults.global.legend.display = false;

    删除工具提示

    Chart.defaults.global.tooltips.enabled = false;

    Here是一个工作小提琴手 .

    回复于

相关问题