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

时间：2022-12-04 09:34:52

I'm making a homepage using, Bootstrap, JQuery and Chart.js (v2). I had my implementation working using v1, but recently just got into Bower and downloaded v2 using that.

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

I'm making a grid of 4 columns each containing a pie chart, however the scaling in v2 is sort of confusing for me to get working. I want the charts to be responsive so they scale properly with the smaller devices such as tablets and smartphones, and one of my problems is getting rid of the legend of the charts as well as the hover information when hovering the mouse over the sections of my chart.

我正在制作一个包含饼图的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,
    });
});

If I remove the empty "labels" field the chart doesn't work anymore. And by the looks of it there is a small spacing at the top of the chart which could indicate that the headers are written, but they are just empty strings.

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

Does anyone have an idea of how to remove the legend, and the hover description? I simply can't get my head around how this is used

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

I will get my hands around a jsfiddle as soon as I get time!

一旦我有时间，我就会抓住一个小伙伴！

EDIT: Link to the docs: https://nnnick.github.io/Chart.js/docs-v2/#getting-started

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

2 个解决方案

#1

136  

The options object can be added to the chart when the new Chart object is created.

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

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

#2

36  

You can change options by using Chart.defaults.global in your javascript file. So you want to change legend and tooltip options.

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

Remove legend

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

Remove Tooltip

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

Here is a working fiddler.

这是一个工作小提琴手。

#1

136  

The options object can be added to the chart when the new Chart object is created.

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

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

#2

36  

You can change options by using Chart.defaults.global in your javascript file. So you want to change legend and tooltip options.

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

Remove legend

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

Remove Tooltip

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

Here is a working fiddler.

这是一个工作小提琴手。

标签：

相关文章