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

我在我的项目中使用了两个图表库。和

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

所以我需要下面这样的图表，只是在axis中的图像

我不确定这是可能的或没有任何上述图书馆

---

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

谷歌图表有一个方法-->

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';
}

请参阅以下工作片段

google.charts.load（'current'{
软件包：['corechart']
}).然后（函数（）{
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 container=document.getElementById（'chart_div'）；
var containerBounds=container.getBoundingClientRect（）；
var chart=新的google.visualization.ColumnChart（容器）；
google.visualization.events.addListener（图表'ready'，函数（）{
var chartLayout=chart.getChartLayoutInterface（）；
var chartBounds=chartLayout.getChartAreaBoundingBox（）；
对于（var i=0；i
echarts支持将富文本作为标签

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

检查这个


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

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
                }
            }
        }
    }
}