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

私はそれぞれが円グラフを含む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

— ゼリアックス
ソース

252

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

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

— BrightIntelDusk
ソース

1

多くは、私が使用していたおかげで反応し、中に行うには、このHWOはように反応.. <ドーナツデータ= {データ}オプション= {{伝説：偽}} />

— ニュートンシェイク

42

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

凡例を削除

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

ツールチップを削除

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

これが実際のフィドラーです。

— cmlonder
ソース

涼しい。JavaScriptでこれらのコマンドを記述できることを知らなかったため、これらの関数の使用方法を知りませんでした。

— Zeliax

1

単にその行の凡例を追加する必要があります：{display：false}

— 海軍
ソース

5

この回答は他の回答とどのように異なりますか？

— Shanteshwar Inde

chart.js v2を使用してチャートの凡例を削除する

index.html

functions.js

凡例を削除

ツールチップを削除