1

我正在设计一个列谷歌图表，需要向 hAxis 添加一个类，是否可以在图表中添加 html 标签？像这样 - [' 2010 ', .135, '13.5%', -.193, '-19.3%'] ？或者也许在选项中？

图表

google.load("visualization", "1", {packages:["corechart"]});
google.setOnLoadCallback(drawChart);

function drawChart() {

  var data = google.visualization.arrayToDataTable([
      ['Class Year', 'Fall', { role: 'tooltip' }, 'Spring', { role: 'tooltip' }],
      ['2010', .135, '13.5%', -.193, '-19.3%'],
      ['2011', .135, '13.5%', -.193, '-19.3%'],
      ['2012', .095, '9.5%', .102, '10.2%'],
      ['2013', .130, '13.0%', -.021, '-2.1%'],
      ['2014', .078, '7.8%', .086, '8.6%'],
      ['2015', .083, '8.3%', -.096, '-9.6%'],
      ['2016', .110, '11.0%', 0.5, '0.5%']

  ]);
  data.setTableProperty('allowHtml', true);

 
  var options = {
      height:500,
      title: 'Figure 1: Job Outlook hiring projections, 2011 – 2016',
      titleTextStyle: {
          color: '545454',
          fontSize: '18',
          fontWidth: 'normal',
          alignment: 'center'
      },
      tooltip: {
          text: 'percentage',
          allowHtml:true,
      },
      legend: {
          position: 'bottom',
          alignment: 'center',
          textStyle: {
              fontSize: '16'
          }
      },
      bars: 'vertical',
      colors: ['#2591C5', '#B10E1A'],
      animation:{
            startup: true,
            duration: 1000,
            easing: 'in',
        },
        annotations: {
          stemColor : 'none',
          alwaysOutside: true,
          textStyle: {
            fontSize: 18,
            bold: true,
            color: '#000',
            auraColor: 'none'
          }
        },
        vAxis: { 
            format: '#.##%',
            title:'Price Index, %',
            bold: true,
            textStyle: {
                fontSize: 12,
                color: '#000',
                bold: true,
              },
            titleTextStyle:{
                fontSize: 22,
                color: '#000',
                bold: true
            }
        },
        hAxis: {
            textColor: 'blue',
            position:'none',
            cssClassNames: 'aaa',
        }
  };

 


  var chart = new google.visualization.ColumnChart(document.getElementById('columnchart'));
  chart.draw(data,options);
  

}
<div class="barchart" id="columnchart" style="width: 100%;"></div>

4

0 回答 0