在 yAxis 中显示带缩略图的条形图而不是标签

Question

我在我的项目中使用了两个图表库。 ECharts and Google Charts.

我想显示带缩略图的条形图。我需要显示横幅日志。

所以我需要像下面这样的图表，只是轴上的图像。

我不确定上述任何库是否可行。

如果有人有任何想法，请告诉我。

Answer 1

google图表有方法 --> getChartLayoutInterface

这允许您获取各种图表元素的坐标

在这种情况下，我们得到轴标签的坐标，
然后在其位置覆盖图像...

var chartLayout = chart.getChartLayoutInterface();
var chartBounds = chartLayout.getChartAreaBoundingBox();

for (var i = 0; i < data.getNumberOfRows(); i++) {
  var axisLabelBounds = chartLayout.getBoundingBox('hAxis#0#label#' + i);
  var path = 'http://findicons.com/files/icons/512/star_wars/32/';
  var thumb = container.appendChild(document.createElement('img'));
  thumb.src = path + data.getProperty(i, 0, 'thumb');
  thumb.style.position = 'absolute';
  thumb.style.top = (axisLabelBounds.top + containerBounds.top) + 'px';
  thumb.style.left = (axisLabelBounds.left + containerBounds.left - 16) + 'px';
}

将文本颜色设置为透明，这样就永远不会看到标签...

hAxis: {
  textStyle: {
    color: 'transparent'
  }
}

请参阅以下工作片段...

google.charts.load('current', {
  packages: ['corechart']
}).then(function () {
  var data = new google.visualization.DataTable();
  data.addColumn('string', 'X');
  data.addColumn('number', 'Y');
  data.addRows([
    [{v: 'a', p: {thumb: 'clone_old.png'}}, 20],
    [{v: 'b', p: {thumb: 'boba_fett.png'}}, 15],
    [{v: 'c', p: {thumb: 'jango_fett.png'}}, 30],
    [{v: 'd', p: {thumb: 'clone_3.png'}}, 5],
    [{v: 'e', p: {thumb: 'clone_2.png'}}, 25]
  ]);

  var options = {
    legend: 'none',
    hAxis: {
      textStyle: {
        color: 'transparent'
      }
    }
  };

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

  google.visualization.events.addListener(chart, 'ready', function () {
    var chartLayout = chart.getChartLayoutInterface();
    var chartBounds = chartLayout.getChartAreaBoundingBox();

    for (var i = 0; i < data.getNumberOfRows(); i++) {
      var axisLabelBounds = chartLayout.getBoundingBox('hAxis#0#label#' + i);
      var path = 'http://findicons.com/files/icons/512/star_wars/32/';
      var thumb = container.appendChild(document.createElement('img'));
      thumb.src = path + data.getProperty(i, 0, 'thumb');
      thumb.style.position = 'absolute';
      thumb.style.top = (axisLabelBounds.top + containerBounds.top) + 'px';
      thumb.style.left = (axisLabelBounds.left + containerBounds.left - 16) + 'px';
    }
  });

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

<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>

Answer 2

echarts支持rich text作为标签

在选项 yAxis 或 xAixs -> axisLabel -> rich 中，

检查这个example1 example2

yAxis: {
    type: 'category',
    data: ['Sunny', 'Cloudy', 'Showers'],
    axisLabel: {
        formatter: function (value) {
            return '{' + value + '| }\n{value|' + value + '}';
        },
        margin: 20,
        rich: {
            value: {
                lineHeight: 30,
                align: 'center'
            },
            Sunny: {
                height: 40,
                align: 'center',
                backgroundColor: {
                    image: weatherIcons.Sunny
                }
            },
            Cloudy: {
                height: 40,
                align: 'center',
                backgroundColor: {
                    image: weatherIcons.Cloudy
                }
            },
            Showers: {
                height: 40,
                align: 'center',
                backgroundColor: {
                    image: weatherIcons.Showers
                }
            }
        }
    }
}

在 yAxis 中显示带缩略图的条形图而不是标签

Display bar chart with thumbnails in yAxis instead of label

charts

bar-chart

google-visualization

echarts