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

标签 javascript jquery css charts chart.js2

我正在使用 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>

函数.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,
    });
});

如果我删除空的“标签”字段,图表将不再有效。从它的外观来看,图表顶部有一个小间距,这可能表明标题已写入,但它们只是空字符串。

有没有人知道如何删除图例和悬停说明?我根本无法理解它是如何使用的

一有空我就会动手做一个 jsfiddle!

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

最佳答案

从 chart.js 版本 2.x 向后:

当创建新的图表对象时,可以将选项对象添加到图表中。

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

关于javascript - 使用 chart.js v2 删除图表上的图例,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/36749509/

相关文章:

javascript - 在查询中使用 Replace with 替换多个元素

javascript - jsTree 在多棵树上拖放

html - Materialize css 如何在焦点集中时减少输入值与其边框之间的空间

javascript - 从下一个跨度中选择文本值

javascript - Screeps:计算 body 的构建成本

javascript - 从左侧拖动 div 效果不佳

javascript - 具有延迟的多个元素上的 jQuery 鼠标悬停功能

html - 不同浏览器之间奇怪的 HTML 表单字段大小差异

javascript - iOS中未调用Youtube IFrame API getVideoLoadedFraction()

javascript - 如何在 HTML 输入文本中正确显示引号