在没有 arrayToDataTable() 的情况下修改 Google 柱形图中的柱形颜色

Question

我从 Google Fusion Table 中解析了我们的数据，所以我不能利用 arrayToDataTable() （我认为）单独更改列的颜色（以及其他特性）。任何人都知道如何 select 列然后修改它们的属性（包括隐藏它们）。谢谢

这是引入 Fusion table 数据并绘制图表的代码：

 google.load('visualization', '1', {
     packages: ['corechart', 'bar']
 });

 google.setOnLoadCallback(drawVisualization);

 var data;
 var chart;
 var views = {};

 var options = {
     titlePosition: 'none',
     backgroundColor: '#E5E3DF',
     tooltip: {
         isHtml: true
     },
     legend: {
         position: 'none'
     },
     vAxis: {
         title: "Avg. Confidence Level",
         format: 'decimal',
         minValue: 0
     },
     hAxis: {
         title: "Master Level Universities"
     },
     height: 500
 };

 function drawVisualization() {
     chart = new google.visualization.ColumnChart(document.getElementById('chart_div'));

     var query = "SELECT ShortName, Thesis FROM 1BslkTKgWIr0jwxR8odybI2fvvLSKnfSE8MylFzDi";
     var queryText = encodeURIComponent(query);
     var opts = {
         sendMethod: 'auto'
     };
     var gvizQuery = new google.visualization.Query(
         'http://www.google.com/fusiontables/gvizdata?tq=', opts);

     gvizQuery.setQuery(query);


     gvizQuery.send(function (e) {

         data = e.getDataTable();
         data = new google.visualization.DataView(data);
         data.setColumnProperty(0, "ShortName", 'color: #e5e4e2'); //maybe this is how I modify column, but it spits out error.

         chart.draw(data, options);
     });
 }

Answer 1

请参阅 coloring columns

的文档

要设置条形颜色，请创建具有 "role" 样式的列：

data.addColumn({type: "string", role: "style" });

然后将其设置为您想要的值：

data.setCell(0,2,'red');
data.setCell(1,2,'purple');
data.setCell(2,2,'green');
data.setCell(3,2,'yellow');

代码片段：

google.load('visualization', '1', {
  packages: ['corechart', 'bar']
});

google.setOnLoadCallback(drawVisualization);

var data;
var chart;
var views = {};

var options = {
  titlePosition: 'none',
  backgroundColor: '#E5E3DF',
  tooltip: {
    isHtml: true
  },
  legend: {
    position: 'none'
  },
  vAxis: {
    title: "Avg. Confidence Level",
    format: 'decimal',
    minValue: 0
  },
  hAxis: {
    title: "Master Level Universities"
  },
  height: 500
};

function drawVisualization() {
  chart = new google.visualization.ColumnChart(document.getElementById('chart_div'));

  var query = "SELECT ShortName, Thesis FROM 1BslkTKgWIr0jwxR8odybI2fvvLSKnfSE8MylFzDi";
  var queryText = encodeURIComponent(query);
  var opts = {
    sendMethod: 'auto'
  };
  var gvizQuery = new google.visualization.Query(
    'http://www.google.com/fusiontables/gvizdata?tq=', opts);

  gvizQuery.setQuery(query);


  gvizQuery.send(function(e) {

    data = e.getDataTable();
    data.addColumn({
      type: "string",
      role: "style"
    }); //maybe this is how I modify column, but it spits out error.
    data.setCell(0, 2, 'red');
    data.setCell(1, 2, 'purple');
    data.setCell(2, 2, 'green');
    data.setCell(3, 2, 'yellow');

    var dataView = new google.visualization.DataView(data);

    chart.draw(dataView, options);
  });
}

html,
body,
#chart_div {
  height: 100%;
  width: 100%;
  margin: 0px;
  padding: 0px
}

<script src="https://www.google.com/jsapi"></script>
<div id="chart_div"></div>

在没有 arrayToDataTable() 的情况下修改 Google 柱形图中的柱形颜色

Modify column colors in Google Column Chart without arrayToDataTable()

javascript

charts

properties

google-visualization

google-fusion-tables