BinaryDevelop
  1. ホーム
  2. javascript

[解決済み] chart.js v2によるチャートの凡例の削除

2022-06-30 04:18:31

質問

Bootstrap、JQuery、Chart.js(v2)を使ってホームページを作っています。v1を使って実装していたのですが、最近Bowerにハマり、それを使ってv2をダウンロードしました。

私は円グラフを含む4つの列のグリッドを作っていますが、v2のスケーリングは、動作させるのに、ちょっと分かりにくいです。私は、タブレットやスマートフォンなどの小さなデバイスで適切に拡大縮小するために、チャートをレスポンシブにしたいのですが、私の問題の1つは、チャートのセクションの上にマウスを置いたときに、チャートの凡例と同様にホバー情報を取り除くことです。

インデックス.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,
    });
});

空の "labels" フィールドを削除すると、チャートはもう動作しません。また、見たところ、チャートの上部に小さなスペースがあり、これはヘッダーが書かれていることを示すかもしれませんが、ただの空文字列です。

どなたか、凡例と、ホバーの記述を削除する方法をご存じないでしょうか？私は単にこれがどのように使用されるかについて、頭を理解することができません。

私は時間があるときにすぐにjsfiddleに手を出します!

EDIT: ドキュメントへのリンクです。 https://nnnick.github.io/Chart.js/docs-v2/#getting-started

どのように解決するのですか？

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

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

関連

最新

おすすめ

について
/
プライバシー・ポリシー
/
お問い合わせ
© 2022 BinaryDevelop. すべての権利は、それぞれの所有者に帰属します