简体   繁体   中英

How to set images as legends in Google Charts

I am trying to use images as legend in Google Charts. This is how it currently looks like:

And this is how it should look like:

This is my JavaScript code to draw the chart:

      function drawChart() {
        var data = google.visualization.arrayToDataTable([
          ['Champions', 'Games', 'Wins', 'Loses'],
          ['Ezreal',  21830,        12172,      9658],
          ['Taric',  17835,      9658,      8177],
          ['Graves',  13567,       6558,        7009],
          ['Lee Sin',  12738,      6349,        6389],
          ['Blitzcrank',  11965,       6132,        5833],
          ['Nunu',  10946,       5407,      5539],
          ['Sona',  9660,       5226,       4434],
          ['Corki',  9457,       4389,      5068],
          ['Jax',  8669,       4358,        4311],
          ['Amumu',  8396,       4743,      3653]
        ]);

        var options = {
          title: 'Most played',
          backgroundColor: '#EEEEEE',
          hAxis: {title: 'Champions',  titleTextStyle: {color: 'red'}}
        };

        var chart = new google.visualization.ColumnChart(document.getElementById('most-popular'));
        chart.draw(data, options);
      }

I already tried to embed the <img> tags into the array like this:

['<img src="img/ezreal.png">'Ezreal',  21830,       12172,      9658]

Unfortunately, Google Charts does some kind of escape that string so that the whole HTML code is shown.

So I am looking for a way to include those images with Google Charts. If that is not possible I am looking for other JavaScript libraries which could do the job.

it is not possible! ( short answer, on mobile)

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM