我在项目中使用了两个图表库。 ECharts和Google Charts。
我想显示带有缩略图的条形图。我需要显示横幅日志。
所以我需要像下面这样的图表,只是轴上的图像。
我不确定上述任何一个库是否可能。
如果有人有任何想法,请告诉我。
答案 0 :(得分:1)
echarts支持rich text
作为标签
在选项yAxis或xAixs-> axisLabel->丰富,
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
}
}
}
}
}
答案 1 :(得分:0)
google图表有一种方法-> StreamsBuilder.table()
这可以让您获取各种图表元素的坐标
在这种情况下,我们获得轴标签的坐标,
然后在其位置覆盖图像...
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);
});