web-dev-qa-db-ja.com

ChartJSのオーバーフロースクロールでチャートの凡例の幅と高さを修正する方法

プロジェクトの円グラフを作成したいので、ChartJSを使用していますが、chartJSにいくつかの問題があります。10〜20のデータフィールドで作業している場合、そのタイムチャートは見栄えがしますが、さらに適用すると1つのグラフに50〜60のデータフィールドがあるため、グラフは凡例ではなく小さく見えます。また、データフィールドがグラフを非表示にするよりも大きすぎる場合は、凡例のみが表示され、グラフは表示されなくなります。

その凡例に高さまたは幅を設定し、さらにデータがある場合はスクロールバーにも適用したいと思います。

これが参考のためのフィドルリンクです

https://jsfiddle.net/KDM1010/5um78rbk/

enter image description here

<canvas id="myChart" width="500" height="300"></canvas>


var ctx = document.getElementById("myChart").getContext('2d');
    var myChart = new Chart(ctx, {
      type: 'pie',
      data: {
        labels: ["lable_1", "lable_2", "lable_3", "lable_4", "lable_5", "lable_6", "lable_7", "lable_8", "lable_9", "lable_10", "lable_11", "lable_12", "lable_13", "lable_14", "lable_15", "lable_16", "lable_17", "lable_18", "lable_19", "lable_20", "lable_21", "lable_22", "lable_23", "lable_24", "lable_25", "lable_26", "lable_27", "lable_28", "lable_29", "lable_30", "lable_31", "lable_32", "lable_33", "lable_34", "lable_35", "lable_36", "lable_37", "lable_38", "lable_39", "lable_40", "lable_41", "lable_42", "lable_43", "lable_44", "lable_45", "lable_46", "lable_47", "lable_48", "lable_49", "lable_50"],
        datasets: [{
          backgroundColor: ["#2ecc71","#3498db","#95a5a6","#9b59b6","#f1c40f","#e74c3c","#34495e","#2ecc71","#3498db","#9a5a6","#9b59b6","#f1c40f","#e74c3c","#34495e","#2ecc71","#3498db","#95a5a6","#9b59b6","#f1c40","#e74c3c","#34495e","#2ecc71","#3498db","#95a5a6","#9b59b6","#f1c40f","#e74c3c","#34495e","#2ecc71","#3498db","#95a5a6","#9b59b6","#f1c40f","#e74c3c","#34495e","#2ecc71","#3498db","#955a6","#9b59b6","#f1c40f","#e74c3c","#34495e","#2ecc71","#3498db","#95a5a6","#9b59b6","#f1c40f,"#e74c3c","#34495e","#2ecc71","#3498db","#95a5a6","#9b59b6","#f1c40f","#e74c3c","#34495e"
          ],
          data: [74, 22, 77, 19, 72, 17, 55, 14, 64, 93, 99, 58, 6, 13, 31, 61, 19, 97, 25, 94, 50, 83, 3, 15, 54, 19, 60, 41, 37, 27, 51, 21, 36, 69, 80, 20, 64, 74, 79, 48, 66, 1, 94, 57, 5, 18, 83, 41, 64, 48]
        }]
      }
    });
javascriptjquerycsschart.jspie-chart
6
Kaushik Makwana

あなたは一つのことを試すことができます

凡例を別のdivに分けてみてください。これで、divを完全に制御できるようになり、カスタム配置を使用できます。独自のcssを使用して、次のコードを検討してください。

 <div id="js-legend" class="chart-legend"></div>
 document.getElementById('js-legend').innerHTML = myChart.generateLegend();

参考までにこれを参照してください [〜＃〜] fiddle [〜＃〜]

凡例をインタラクティブに処理するには、コールバック関数を拡張して次のように操作する必要があります。

$("#js-legend > ul > li").on("click",function(e){
        var index = $(this).index();
        $(this).toggleClass("strike")
        var ci = e.view.myChart;
        var curr = ci.data.datasets[0]._meta[0].data[index];
        curr.hidden = !curr.hidden
        ci.update();
})

動作中の凡例については、これを参照してください [〜＃〜] fiddle [〜＃〜]

説明：

イベントビューがグラフを取得できるようにグラフをウィンドウにバインドし、後でインデックスによってデータを操作し、更新されたランタイムでいくつかのcssトリックを使用してストライク効果を説明しました。

16
Vinod Louis

これに対する解決策は見つかりませんでしたが、表示するラベルが多すぎる場合は凡例をオフにすることができます（プロジェクトで行いました）-ここでは最大15個のラベルに設定されています：

options : {
        responsive: true,
        maintainAspectRatio: false,
        layout: {
          padding: {
             left     : 0,
             right    : 0,
             top      : 0,
             bottom   : 0
          }
        },
        animation: {
          duration : 5000
        },
        legend: {
          display: this.chartValues.length <= 15,
        }
}

グラフを大きくレンダリングする場所を作成することもできます。これをscssファイルに追加します。

.chartjs-render-monitor{
    height: 300px !important;
}

私はそれが誰かを助けるつもりだと思います

1
Marcin Augustyn