Chart.js如何在多条堆积图上显示多个标签 [英] Chart.js how to display multiple labels on multi bar stacked chart

查看:76
本文介绍了Chart.js如何在多条堆积图上显示多个标签的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

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

How can i display different labels under each column and also have another label for the entire group?

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

As you can see in the picture below i want to use fontawesome icons for each column but another label for the main group. I found other answers how to use fa icons but don't know how to position them under each bar.

连接不同列的趋势线不是那么重要,但是如果我也能找到如何添加趋势线的话,那就太好了.

The trendlines which connect distinct columns are not so important but would be great if i can find out how to add them also.

图表还必须是可滚动的,因为它可以容纳大量数据,并且需要显示标签.我也找到了一些带有滚动的示例.

Also the chart needs to be scrollable as it can hold lots of data and the labels need to be shown. I found some examples with scroll as well.

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

Any info is highly appreciated. Or are there any other open source chart frameworks in which i could implement this or something similar to fit my needs?

推荐答案

使用Google图表...

在图表的就绪" 事件中,
您可以使用图表方法-> getChartLayoutInterface()

var chartLayout = chart.getChartLayoutInterface();

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

the interface has a method --> getBoundingBox()
which will return the position of requested chart element
to get the position of a bar...

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

其中第一个#0 是系列,第二个是行,
'bar#0#0'将获得第一行的第一行

where the first #0 is the series, and the second is the row,
'bar#0#0' would get the first bar on the first row

我们还可以获取轴标签的位置...

we can also get the position of the axis label...

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

我们可以结合使用条形和标签范围来定位图标
我们希望条形图位于 left 的位置,而标签

we can use a combination of the bar and label bounds to position the icon
we want the left position from the bar, and the top position from the label

请参阅以下工作片段,
列属性用于存储图标名称,
x轴标签用于该组
图标到位后,将轴标签向下移动以留出空间

see following working snippet,
a column property is used to store the icon name,
the x-axis labels are used for the group
once the icon is in position, the axis label is moved down to make room

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如何在多条堆积图上显示多个标签的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆