Google Visualization Column Chart将查询中的数据列设置为角色：“样式” [英] Google Visualization Column Chart set a data column from query as role: "Style"

问题描述

我有一个可以正常工作的查询的Google Visualization Column Chart。通过使用下面的代码片段，我可以在查询后设置具有样式角色的列。它为查询数据添加一个新列，并将角色设置为样式。这会相应地为每个柱形图栏着色。但是我希望能够使用我的查询列C中的一个作为颜色代码，而不必在之后添加它。我似乎无法得到这个工作。有任何想法吗？我在代码片段下面张贴了更多我的代码，以便您能看到我来自哪里。非常感谢你们提供的任何帮助。 Brandon

var data = response.getDataTable（）;

data.addColumn（{type：string，role：style}）;
data.setCell（0,2，'red'）;
data.setCell（1,2，'orange'）;
data.setCell（2,2，'green'）;
data.setCell（3,2，'yellow'）;


//更多代码这个，但我忘了它。

函数drawDashboard（）{
var query = new google.visualization.Query（
'URL'）;


query.setQuery（'SELECT A，B，C'）;
query.send（handleQueryResponse）;

$ b函数handleQueryResponse（响应）{
if（response.isError（））{
alert（'Error in query：'+ response.getMessage（） +''+ response.getDetailedMessage（））;
return;
}

var data = response.getDataTable（）;

data.addColumn（{type：string，role：style}）;
data.setCell（0,2，'red'）;
data.setCell（1,2，'orange'）;
data.setCell（2,2，'green'）;
data.setCell（3,2，'yellow'）;

//创建仪表板。

var dashboard = new google.visualization.Dashboard（
document.getElementById（'dashboard_div'））;

//创建一个范围滑块，传递一些选项
var scoreSlider = new google.visualization.ControlWrapper（{
controlType：'NumberRangeFilter'，
containerId：' filter_div'，
options：{
filterColumnLabel：'Class AVG'
}
}）;

ClassFilter = new google.visualization.ControlWrapper（{
controlType：'CategoryFilter'，
containerId：'Classfilter_div'，
options：{
'filterColumnLabel'：'Teacher Name'，'ui'：{'labelStacking'：'veClasscal'，'allowTyping'：true，'allowMultiple'：true
}
}}）;

//创建列条形图，传递一些选项
var columnChart = new google.visualization.ChartWrapper（{
chartType：'ColumnChart'，
containerId： 'chart_div'，
选项：{
标题：'按班授课数学'，
身高：320，
宽度：500，
chartArea：{left： 10％，顶部：10％，宽度：80％，高度：60％}，
hAxis：{textStyle：{fontSize：14}，title：'Teacher Name'，titleTextStyle： {fontSize：14}，textStyle：{fontSize：14}}，
vAxis：{minValue：0，maxValue：100，title：'Math Proficiency AVG'，titleTextStyle：{fontSize：14}，textStyle：{fontSize ：14}}，
legend：{position：'none'}，
animation：{duration：1500，easing：'out'}，
colors：['＃a4c2f4'，' ＃3c78d8']
}，
view：{columns：[0， 1，2]}
}）;

//定义表格
var table = new google.visualization.ChartWrapper（{
chartType：'Table'，
dataTable：data，
containerId：'table_div'，
options：{
width：'400px'
}，
view：{columns：[0，1，]}
}） ;

//建立依赖关系，声明'过滤'驱动'ColumnChart'，
//这样柱形图将只显示允许通过
//的条目选择滑块范围。

dashboard.bind（[scoreSlider]，[table，columnChart]）;
dashboard.bind（[ClassFilter]，[table，columnChart]）;

//绘制仪表板。
dashboard.draw（data）;

} //下面有更多代码，但我忽略了它。


解决方案

我不知道如何将此添加到查询中的一列但... ...使用

rel =nofollow> DataView 的计算列应该可以工作...

假设您要测试的值在第二列 - index 1

  var data = response.getDataTable（）; 
 
 var view = new google.visualization.DataView（data）; 
 $ b view.setColumns（[0，1，{
 type：string，
 role：style，
 calc：function（dataTable，rowIndex） {
 if（dataTable.getValue（rowIndex，1）< 0.69）{
 return'color：red;'; 
} else if（（dataTable.getValue（rowIndex，1）> ; = 0.69）&&（dataTable.getValue（rowIndex，1）< = 0.79））{
 return'color：yellow;'; 
} else {
 return'color ：green;'; 
} 
} 
}]）; 
  

I have a Google Visualization Column Chart from a query that works fine. I can set the a columns with a style role after the query by using the code snippet below. It adds a new column to the query data and sets the role as "Style". This colors each of the column chart bars accordingly. But I want to be able to use one of my query columns "C" for example as the color code and not have to add it afterward. I can't seem to get this to work. Any ideas? I posted more of my code below the snippet so you can see where I'm coming from. Thanks so much guys for any help you can give. Brandon

  var data = response.getDataTable();

            data.addColumn({type: "string", role: "style" });
            data.setCell(0,2,'red');
            data.setCell(1,2,'orange');
            data.setCell(2,2,'green');
            data.setCell(3,2,'yellow');

// More code above this, but I ommited it.  

function drawDashboard() {
         var query = new google.visualization.Query(
         'URL');


     query.setQuery('SELECT A, B, C');
     query.send(handleQueryResponse);
      }

      function handleQueryResponse(response) {
        if (response.isError()) {
          alert('Error in query: ' + response.getMessage() + ' ' + response.getDetailedMessage());
          return;
        }

  var data = response.getDataTable();

            data.addColumn({type: "string", role: "style" });
            data.setCell(0,2,'red');
            data.setCell(1,2,'orange');
            data.setCell(2,2,'green');
            data.setCell(3,2,'yellow');

        // Create a dashboard.

        var dashboard = new google.visualization.Dashboard(
            document.getElementById('dashboard_div'));

        // Create a range slider, passing some options
        var scoreSlider = new google.visualization.ControlWrapper({
            controlType: 'NumberRangeFilter',
            containerId: 'filter_div',
            options: {
            filterColumnLabel: 'Class AVG'
               }
        });

        var ClassFilter = new google.visualization.ControlWrapper({
            controlType: 'CategoryFilter', 
            containerId: 'Classfilter_div',
            options: {
            'filterColumnLabel': 'Teacher Name','ui': { 'labelStacking': 'veClasscal','allowTyping': true,'allowMultiple': true
               }
        }});

        // Create a Column Bar chart, passing some options
        var columnChart = new google.visualization.ChartWrapper({
            chartType: 'ColumnChart',
            containerId: 'chart_div',
            options: {
                title: 'Math Proficiency by Class',
                height: 320,
                width: 500,
                chartArea:{left:"10%",top:"10%",width:"80%",height:"60%"},
                hAxis: {textStyle: {fontSize:14}, title: 'Teacher Name', titleTextStyle: {fontSize:14}, textStyle: {fontSize:14}},
                vAxis: {minValue: 0, maxValue: 100, title: 'Math Proficiency AVG', titleTextStyle: {fontSize:14}, textStyle: {fontSize:14}},
                legend: {position: 'none'},
                animation: {duration:1500, easing:'out'},
                colors: ['#a4c2f4','#3c78d8']
            },
               view: {columns: [0, 1, 2]}
        });

        // Define a table
        var table = new google.visualization.ChartWrapper({
          chartType: 'Table',
          dataTable: data,
          containerId: 'table_div',
          options: {
          width: '400px'
               },
                 view: {columns: [0, 1,]}
         });

        // Establish dependencies, declaring that 'filter' drives 'ColumnChart',
        // so that the column chart will only display entries that are let through
        // given the chosen slider range.

        dashboard.bind([scoreSlider], [table, columnChart]);
        dashboard.bind([ClassFilter], [table, columnChart]);

        // Draw the dashboard.
        dashboard.draw(data);

      }// More code below this, but I ommited it.

解决方案

I'm not sure how you would add this to a column in the query but...

using a DataView with a calculated column should work...

Assumes the value you want to test is in the second column -- index 1

var data = response.getDataTable();

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

view.setColumns([0, 1, {
  type: "string",
  role: "style",
  calc: function (dataTable, rowIndex) {
    if (dataTable.getValue(rowIndex, 1) < 0.69) {
      return 'color: red;';
    } else if ((dataTable.getValue(rowIndex, 1) >= 0.69) && (dataTable.getValue(rowIndex, 1) <= 0.79)) {
      return 'color: yellow;';
    } else {
      return 'color: green;';
    }
  }
}]);

这篇关于Google Visualization Column Chart将查询中的数据列设置为角色：“样式”的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！