web-dev-qa-db-ja.com

chart.js v2でチャートの凡例を削除する

Bootstrap、JQuery、Chart.js（v2）を使ってホームページを作成しています。私の実装ではv1を使っていましたが、最近Bowerに入ってそれを使ってv2をダウンロードしました。

円グラフを1つずつ含む4列のグリッドを作成していますが、v2での拡大縮小は、作業するのに混乱を招くようなものです。タブレットやスマートフォンなどの小型デバイスに合わせてチャートが適切に対応するようにチャートをレスポンシブにしたいのですが、私の問題の1つは、チャートの凡例とマウスの上にマウスを置いたときのホバー情報を取り除くことです。チャート。

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

javascriptjquerycsschartschart.js2
83
Zeliax

オプションオブジェクトは、新しいChartオブジェクトが作成されたときにチャートに追加できます。

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

JavaScriptファイルでChart.defaults.globalを使用してオプションを変更できます。凡例とツールチップのオプションを変更したいのです。

凡例を削除

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

ツールチップを削除

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

ここ は働き者です。

40
cmlonder