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

问题描述 投票：0回答：8

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

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

有人知道如何删除图例和悬停描述吗？我根本不明白这是如何使用的

一有时间我就会拿起小提琴！

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

javascript jquery css charts chart.js2
8个回答
337
投票

从 Chart.js 版本 2.x 向后：

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

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

从 Chart.js 版本 3.x 开始：

legend、title 和 tooltip 命名空间从选项移至 

options.plugins
。

var chart1 = new Chart(canvas, {
    type: "pie",
    data: data,
    options: {
        plugins: {
            legend: {
                display: false
            },
        }
    }
});
49
投票

您可以在 javascript 文件中使用 

Chart.defaults.global
更改默认选项。所以您想更改图例和工具提示选项。

删除图例

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

删除工具提示

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

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

10
投票

修改Ishan的答案

如果你像我一样使用react，

const data = {
...
}

const options = {
  plugins: {
    legend: {
      display: false,
    },
  },
};


<Bar data={data} options={options} />
4
投票

对我来说这不起作用：

图例：{显示：假}

但这很好用，谢谢。

插件：{ 传奇： { 显示：假， }, }

1
投票

如果您使用的是chartjs 2.x版本 然后简单地添加：

legend: {
  display: false,
},

但是如果您使用的是 Chart.js 版本 3.x 或更高版本，那么所有这些属性都已移至元素中，因此只需添加到那里即可

elements: {
  line: {
    borderWidth: 0.4,
  },
  point: {
    radius: 0,
    hitRadius: 10,
    hoverRadius: 4,
    hoverBorderWidth: 3,
  },
  legend: {
    display: false,
  }
},
0
投票

您只需添加该行 传奇： { 显示：假 }

0
投票

对于使用 Chart JS 4+ 的人来说，可以通过如下选项进行配置：

  options: {
    plugins: {
      legend: {
        display: false,
      },
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.