Question

如何在每列下显示不同的标签，并且如何在整个组中显示另一个标签？

正如您在下面的图片中看到的那样，我想为每列使用fontawesome图标，但为主要组使用另一个标签。我找到了其他使用fa图标的答案，但不知道如何将其放置在每个栏的下方。

连接不同列的趋势线不是那么重要，但是如果我也能找到如何添加趋势线，那将是很好的。

图表还需要滚动，因为它可以容纳很多数据，并且需要显示标签。我也找到了一些带有滚动的示例。

任何信息都将受到高度赞赏。还是有其他开源图表框架可以实现此功能或类似功能以适合我的需求？

Answer 1

使用Google图表...

在图表的'ready'事件中，
您可以使用图表方法-> getChartLayoutInterface()

var chartLayout = chart.getChartLayoutInterface();

接口具有方法-> getBoundingBox()
这将返回请求的图表元素的位置
获取酒吧的位置...

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

其中第一个#0是系列，第二个是行，
'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>

Chart.js如何在多条堆积图上显示多个标签

1 个答案: