Question

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);

我有一个谷歌条形图，其中包含我想要动态添加课程的条形标签。但是，我还没有找到一种方法来引用标签本身或添加课程。该图表是根据我正在构建的Google数据表创建的。

这是我想要完成的事情：

我觉得这应该很简单，但我还没有在文档中找到任何内容。有人有答案吗？

Answer 1

标签是svg <text>元素，由图表

创建

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

相反，建议使用以下图表选项来设置标签样式...

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

虽然不推荐，但您可以手动更改svg，
在图表的'ready'或'animationfinish'事件触发后

请参阅以下工作代码段...

＆＃13;

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);
});

＆＃13;

<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>

＆＃13;

注意：以这种方式进行的更改不会显示通过，
使用方法getImageURI获取图表的图像时...

将类应用于Google条形图标签

1 个答案: