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


105

我正在使用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,
    });
});

如果我删除了空白的“标签”字段,则该图表将无法再使用。从外观上看,图表顶部有一个很小的间距,这表明标题已写入,但它们只是空字符串。

有谁知道如何删除图例和悬停说明?我简直无法理解如何使用它

只要有时间,我就会把手伸向jsfiddle!

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

Answers:


252

创建新的Chart对象时,可以将options对象添加到Chart中。

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

1
非常感谢,我是使用反应并此藿做在反应方式.. <甜甜圈数据= {数据}选项= {{图例:假}} />
牛顿的Sheikh

42

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

删除图例

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

删除工具提示

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

是一个正在工作的提琴手。


凉。我没有使用这些功能的方法,因为我不知道自己可以用Javascript编写这些命令。
Zeliax

By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.