代码之家 › 专栏 › 技术社区 › user2276280

将类应用于谷歌条形图标签

google-visualization

user2276280 · 技术社区 · 8 年前

var options = {
        width: "100%",
        legend: 'none',
        backgroundColor: { fill: 'transparent' },
        chartArea: { width: '80%' },
        bar: { groupWidth: "50%" },
        animation: { "startup": true, duration: 1000, easing: 'in' },
        colors: ['#529736', '#007DB9', '#EC1C24'],
        fontSize: 10,
        hAxis: {
            direction: 1,
            title: 'Database'
        },
        vAxis: {
            title: 'Percent Of Successful Intervals',
            minValue: 75,
            format: '#',
            ticks: [75, 80, 85, 90, 95, 100]
        }
    };

 var table = new google.visualization.DataTable();
            table.addColumn('string', 'Database');
            table.addColumn('number', 'Percent of Successful Intervals');
            table.addColumn({ type: 'string', role: 'tooltip' });
            table.addColumn({ type: 'string', role: 'style' });


                    table.addRows([[
                    graphLabel,
                    percentRNI,
                    "Percentage: " + data.d[iCnt].RNIPct + "%\nRecords: " + data.d[iCnt].RNIRecordCount,
                    'fill-color: ' + getColor(percentRNI)
                    ]]);

                    table.addRows([[
                    "LDA",
                    percentLDA,
                    "Percentage: " + data.d[iCnt].LDAPct + "%\nRecords: " + data.d[iCnt].LDARecordCount,
                    'fill-color: ' + getColor(percentLDA)
                    ]]);

chart.draw(table, options);

我有一个谷歌条形图,其中有条形标签,我正试图动态添加一个类。然而,我还没有找到一种方法来引用标签本身或添加类。该图表是从我正在构建的谷歌数据表中创建的。

我觉得这应该很简单,但我在文档中找不到任何东西。有人知道答案吗?

1 回复 | 直到 8 年前

WhiteHat 8 年前

标签是svg <text> 元素,由图表创建

您可以将css应用于所有 < 元素,
但这不仅仅包括您指定的标签

      hAxis: {
        textStyle: {
          color: <string>,
          fontName: <string>,
          fontSize: <number>,
          bold: <boolean>,
          italic: <boolean>
        }
      },

尽管不推荐,但您可以手动更改svg,
在图表之后 'ready' 'animationfinish'

请参阅以下工作段。。。

google.charts.load('current', {
  packages: ['corechart']
}).then(function () {
  var data = google.visualization.arrayToDataTable([
    ['x', 'y'],
    ['RNI', 97],
    ['LDA', 100]
  ]);

  var options = {
    width: "100%",
    legend: 'none',
    backgroundColor: { fill: 'transparent' },
    chartArea: { width: '80%' },
    bar: { groupWidth: "50%" },
    animation: { "startup": true, duration: 1000, easing: 'in' },
    colors: ['#529736', '#007DB9', '#EC1C24'],
    fontSize: 10,
    hAxis: {
      direction: 1,
      title: 'Database'
    },
    vAxis: {
      title: 'Percent Of Successful Intervals',
      minValue: 75,
      format: '#',
      ticks: [75, 80, 85, 90, 95, 100]
    }
  };

  var chart = new google.visualization.ColumnChart(document.getElementById('chart_div'));
  google.visualization.events.addListener(chart, 'animationfinish', function () {
    $($('text').filter(':contains("RNI")')[0]).attr('fill', '#ff0000');
    $($('text').filter(':contains("RNI")')[0]).attr('font-size', '20');
  });
  chart.draw(data, options);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>

使用方法时 getImageURI 要获取图表的图像。。。