134

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

我正在制作一个由 4 列组成的网格，每列都包含一个饼图，但是 v2 中的缩放对我来说有点令人困惑。我希望图表具有响应性，以便它们与平板电脑和智能手机等较小的设备正确缩放，我的问题之一是摆脱图表的图例以及将鼠标悬停在我的部分上时的悬停信息图表。

索引.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

4

6 回答 6

307

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

var chart1 = new Chart(canvas, {
    type: "pie",
    data: data,
    options: {
         legend: {
            display: false
         },
         tooltips: {
            enabled: false
         }
    }
});
于 2016-07-05T21:13:40.627 回答
47

您可以通过Chart.defaults.global在您的 javascript 文件中使用来更改默认选项。所以你想改变图例和工具提示选项。

删除图例

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

删除工具提示

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

这是一个工作提琴手。

于 2016-04-20T18:14:11.837 回答
43

从 chart.js 版本 3.x 开始：图例、标题和工具提示命名空间从 options 移动到 options.plugins。

var chart1 = new Chart(canvas, {
    type: "pie",
    data: data,
    options: {
          plugins:{   
             legend: {
               display: false
                     },
                  }
             }
});
于 2021-06-09T22:29:07.687 回答
3

修改伊山的答案

如果你像我一样使用反应，

const data = {
...
}

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


<Bar data={data} options={options} />
于 2021-10-26T10:20:41.523 回答
0

您只需添加该行图例： { display: false }

于 2019-09-06T11:39:59.053 回答
0

对我来说，这不起作用：

图例：{显示：假}

但这很好用，谢谢。

插件：{图例：{显示：假，}，}

于 2022-02-14T04:04:51.093 回答