Chart.jsマルチバースタックチャートに複数のラベルを表示する方法

debugcn 投稿 Dev

ラドゥ・トゥルトイ

各列の下に異なるラベルを表示し、グループ全体に別のラベルを付けるにはどうすればよいですか？

下の写真でわかるように、各列にはfontawesomeアイコンを使用しますが、メイングループには別のラベルを使用します。faアイコンの使い方について他の回答を見つけましたが、各バーの下に配置する方法がわかりません。

個別の列を接続するトレンドラインはそれほど重要ではありませんが、それらを追加する方法も見つけられれば素晴らしいと思います。

また、チャートは大量のデータを保持でき、ラベルを表示する必要があるため、スクロール可能である必要があります。巻物の例もいくつか見つけました。

どんな情報でも大歓迎です。または、これまたは私のニーズに合うものを実装できる他のオープンソースチャートフレームワークはありますか？

白い帽子

グーグルチャートを使用して...

チャートの'ready'イベントでは、
チャートメソッドを使用できます->getChartLayoutInterface()

var chartLayout = chart.getChartLayoutInterface();

インターフェイスには、バーの位置を取得するためgetBoundingBox()
に要求されたチャート要素の位置を返すメソッド->があり
ます。

var barBounds = chartLayout.getBoundingBox('bar#0#0');

ここで、最初#0はシリーズで、2番目は行で
'bar#0#0'、最初の行の最初のバーを取得します

軸ラベルの位置も取得できます...

var labelBounds = chartLayout.getBoundingBox('hAxis#0#label#0');

我々は、アイコン配置するバーとラベルの境界を組み合わせて使用することができます
私たちが望むleftバーからの位置を、そしてtopラベルの位置を

次の作業スニペットを参照してください。
列プロパティはアイコン名を格納するために使用され
、x軸ラベルは
アイコンが配置されるとグループに使用され、軸ラベルはスペースを空けるために下に移動されます

google.charts.load('current', {
  packages: ['corechart']
}).then(function () {
  var data = new google.visualization.DataTable({
    cols: [
      {label: 'x', type: 'string'},
      {label: 'file', type: 'number', p: {icon: 'fa-file'}},
      {label: 'database', type: 'number', p: {icon: 'fa-database'}},
      {label: 'random', type: 'number', p: {icon: 'fa-random'}},
    ],
    rows: [
      {c:[{v: 'Label 1'}, {v: 11}, {v: 6}, {v: 15}]},
      {c:[{v: 'Label 2'}, {v: 8}, {v: null}, {v: 12}]},
      {c:[{v: 'Label 3'}, {v: 6}, {v: 8}, {v: 18}]},
      {c:[{v: 'Label 4'}, {v: null}, {v: 1}, {v: 16}]},
    ]
  });

  var options = {
    bar: {
      groupWidth: '50%',
      width: 20
    },
    colors: ['#ffc107', '#d32f2f', '#00bcd4'],
    height: 600,
    legend: 'none',
    title: 'Capacities',
    width: 1000,
  };

  var container = document.getElementById('chart_div');
  var chart = new google.visualization.ColumnChart(container);

  google.visualization.events.addListener(chart, 'ready', function () {
    // initialize bounds variables
    var axisLabels = container.getElementsByTagName('text');
    var chartLayout = chart.getChartLayoutInterface();
    var chartBounds = chartLayout.getChartAreaBoundingBox();
    var containerBounds = container.getBoundingClientRect();
    var labelIndex;

    // add icons
    for (var r = 0; r < data.getNumberOfRows(); r++) {
      var barBounds;
      var icon;
      var iconBounds;
      var labelBounds = chartLayout.getBoundingBox('hAxis#0#label#' + r);
      for (var c = 1; c < data.getNumberOfColumns(); c++) {
        barBounds = chartLayout.getBoundingBox('bar#' + (c - 1) + '#' + r);
        if (barBounds !== null) {
          icon = container.appendChild(document.createElement('i'));
          icon.className = 'fa ' + data.getColumnProperty(c, 'icon');
          icon.style.position = 'absolute';
          iconBounds = icon.getBoundingClientRect();
          icon.style.top = (containerBounds.top + labelBounds.top) + 'px';
          icon.style.left = (barBounds.left + containerBounds.left + (barBounds.width / 2) - (iconBounds.width / 2)) + 'px';
        }
      }

      // move axis label down
      labelIndex = -1;
      Array.prototype.forEach.call(axisLabels, function(label) {
        if (label.getAttribute('text-anchor') === 'middle') {
          labelIndex++;
          if (labelIndex === r) {
            label.setAttribute('y', (parseFloat(label.getAttribute('y')) + (iconBounds.height * 2)));
          }
        }
      });
    }
  });

  chart.draw(data, options);
});

i {
  color: #00bcd4;
}

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css" integrity="sha384-mzrmE5qonljUremFsqc01SB46JvROS7bZs3IO2EmfFsd15uHvIt+Y8vEf7N7fWAU" crossorigin="anonymous">
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>

この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。

侵害の場合は、連絡してください[email protected]