javascript - How to add an images as labels to Canvas Charts using chart.js -
i generating chart.js canvas bar chart. trying is, inside of labels array, add images go each label, opposed text label itself. here code chart: json object getting data has image url want use display picture:
$.ajax({ method: "get", url: "http://localhost:3000/admin/stats/show", datatype: "json", error: function() { console.log("sorry, went wrong"); }, success: function(response) { console.log(response) var objecttouse = response.top_dogs var updatelabels = []; var updatedata = []; (var = 0; < 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 scale should start @ zero, or order of magnitude down lowest value scalebeginatzero : true, //boolean - whether grid lines shown across chart scaleshowgridlines : true, //string - colour of grid lines scalegridlinecolor : "rgba(0,0,0,.05)", //number - width of grid lines scalegridlinewidth : 1, //boolean - whether show horizontal lines (except x axis) scaleshowhorizontallines: true, //boolean - whether show vertical lines (except y axis) scaleshowverticallines: true, //boolean - if there stroke on each bar barshowstroke : true, //number - pixel width of bar stroke barstrokewidth : 2, //number - spacing between each of x value sets barvaluespacing : 5, //number - spacing between data sets within x values bardatasetspacing : 2, }; var loadnewchart = new chart(barchart).bar(data, options); }
});
if has solution appreciated!
Comments
Post a Comment