我正在生成一个chart.js画布条形图。我尝试做的是,在labels数组中,添加与每个标签匹配的图像,而不仅仅是文本标签本身。下面是该图表的代码:我从中获取数据的json对象有一个图像url,我想用它来显示图片:
$.ajax({
method: "get",
url: "http://localhost:3000/admin/stats/show",
dataType: "json",
error: function() {
console.log("Sorry, something went wrong");
},
success: function(response) {
console.log(response)
var objectToUse = response.top_dogs
var updateLabels = [];
var updateData = [];
for (var i = 0; i < objectToUse.length; i+=1) {
updateData.push(objectToUse[i].win_percentage * 100);
updateLabels.push(objectToUse[i].title);
}
var data = {
labels: updateLabels,
datasets: [
{
label: "Top Winners Overall",
fillColor: get_random_color(),
strokeColor: "rgba(220,220,220,0.8)",
highlightFill: get_random_color(),
highlightStroke: "rgba(220,220,220,1)",
data: updateData
}
]
};
var options = {
//Boolean - Whether the scale should start at zero, or an order of magnitude down from the lowest value
scaleBeginAtZero : true,
//Boolean - Whether grid lines are shown across the chart
scaleShowGridLines : true,
//String - Colour of the grid lines
scaleGridLineColor : "rgba(0,0,0,.05)",
//Number - Width of the grid lines
scaleGridLineWidth : 1,
//Boolean - Whether to show horizontal lines (except X axis)
scaleShowHorizontalLines: true,
//Boolean - Whether to show vertical lines (except Y axis)
scaleShowVerticalLines: true,
//Boolean - If there is a stroke on each bar
barShowStroke : true,
//Number - Pixel width of the bar stroke
barStrokeWidth : 2,
//Number - Spacing between each of the X value sets
barValueSpacing : 5,
//Number - Spacing between data sets within X values
barDatasetSpacing : 2,
};
var loadNewChart = new Chart(barChart).Bar(data, options);
}
});
如果任何人有一个解决方案,这将是非常感谢!
2条答案
按热度按时间nwwlzxa71#
我知道这是一个老帖子,但由于它已经被查看了很多次,我将描述一个与当前Chart.js版本2.9.3一起工作的解决方案。
Plugin Core API提供了一系列可以用来执行自定义代码的钩子。您可以使用
afterDraw
钩子直接在画布上使用CanvasRenderingContext2D
绘制图像(图标)。标签的位置必须通过
xAxes.ticks.padding
定义,如下所示:请看一下下面的可运行代码片段。
第一个
tkclm6bt2#
Chart.js v3+饼图、圆环图和极坐标图解决方案
有了Chart.js的第3版和chart.js-plugin-labels的更新版本,现在这变得非常简单。
在
options.plugins.labels
中,将render: image
和嵌套数组images
与包含属性src
、width
和height
的对象相加。第一个