2017-06-09 3 views
0

水平バーで固定行サイズを設定する方法。私は試してみたChartJSの行サイズ

yAxes: [{ 
    barPercentage: 1.0, 
    categoryPercentage: 1.0 
}] 

しかし、それはバーのサイズが変更され、私は固定サイズが必要です。 完璧なのは、行のサイズ(棒、ラベル)が固定で、データ量(スクロールバー)に依存しないグラフです。 chartJSで実装できますか?

horizontal bar

code

感謝。

答えて

0

ここに更新JSコードがあります。水平バーの固定行サイズが固定されます。ウィンドウのサイズが変更されたとき

https://jsfiddle.net/1knt2md8/

var ctx = document.getElementById('myChart').getContext('2d'); 
var chart = new Chart(ctx, { 
    type: 'horizontalBar', 
    data: { 
    labels: [ 
     ['Label_1_Line_1', 'Label_1_Line_2', 'Label_1_Line_3'], 
     ['Label_2_Line_1', 'Label_2_Line_2', 'Label_2_Line_3'], 
     ['Label_3_Line_1', 'Label_3_Line_2', 'Label_3_Line_3'], 
     ['Label_4_Line_1', 'Label_4_Line_2', 'Label_4_Line_3'], 
     ['Label_5_Line_1', 'Label_5_Line_2', 'Label_5_Line_3'], 
     ['Label_6_Line_1', 'Label_6_Line_2', 'Label_6_Line_3'], 
     ['Label_7_Line_1', 'Label_7_Line_2', 'Label_7_Line_3'], 
    ], 
    datasets: [{ 
     label: "My First dataset", 
     backgroundColor: 'rgb(255, 99, 132)', 
     borderColor: 'rgb(255, 99, 132)', 
     data: [0, 10, 5, 2, 20, 30, 70], 
    }] 
    }, 
    options: { 
    scales: { 
     yAxes: [{ 

     maxBarThickness : 80 

     }], 

     xAxes: [{ 
     ticks: { 
      mix: 0, 
      max: 40, 
      stepSize: 5 
     } 

     }] 
    } 
    } 
}); 
+0

行サイズはまだ変化しています。 – mikaelst

+0

.chartContainer cssクラスに 'width:502px;'を追加します。私は私の答えを更新しました – ISHIDA