Google visualization 如何为可以'；不能显示在Google图表数据表中_Google Visualization

Google visualization 如何为可以'；不能显示在Google图表数据表中

google-visualization

Google visualization 如何为可以'；不能显示在Google图表数据表中,google-visualization,Google Visualization,我使用的谷歌图表的数据表构建如下： “已创建”、“已通过”、“已通过bug”和“在中” 进程“，”失败“，”未测试“，”重新测试“，”阻塞“，”功能“] “2020年8月31日”，1,10,3,5,23,0,0，“功能1” “2020年8月31日”，5,4,23,1,39,0,0，“功能2” “2020年8月31日”，1,10,3,5,23,0,0，“功能3” “2020年9月6日”，1,10,3,5,23,0,0，“功能1” “2020年9月6日”，5,4,23,1,39,0,0，“功能2”

我使用的谷歌图表的数据表构建如下：

“已创建”、“已通过”、“已通过bug”和“在中” 进程“，”失败“，”未测试“，”重新测试“，”阻塞“，”功能“]
“2020年8月31日”，1,10,3,5,23,0,0，“功能1”
“2020年8月31日”，5,4,23,1,39,0,0，“功能2”
“2020年8月31日”，1,10,3,5,23,0,0，“功能3”
“2020年9月6日”，1,10,3,5,23,0,0，“功能1”
“2020年9月6日”，5,4,23,1,39,0,0，“功能2”

我按第0列（日期）对值进行分组，并在堆叠的柱形图中进行可视化，如下所示：

因为我把数字（第1-7列）和字符串（第8列）混在一起，所以我创建了一个没有第8列的DataView。如果我不这样做，我会得到错误“给定轴上的所有系列必须具有相同的数据类型”

我仍然希望第8列在ControlWrapper中用作“CategoryFilter”。例如，绘制仅显示“功能1”数据的columnChar

下面是我的代码。它是Jinja（运行Flask Web服务器）和javascript的混合体：

  <body>
    <script type="text/javascript">
      var dataArrayTests = new Array();
    </script>

{% for item in test_details %}
    <script type="text/javascript">
        dataArrayTests.push([
            '{{ item["created"] }}',
            parseInt('{{ item["Passed"] }}'),
            parseInt('{{ item["Passed with bugs found"] }}'),
            parseInt('{{ item["In Process"] }}'),
            parseInt('{{ item["Failed"] }}'),
            parseInt('{{ item["Untested"] }}'),
            parseInt('{{ item["Retest"] }}'),
            parseInt('{{ item["Blocked"] }}'),
            '{{ functionality }}'
        ]);
    </script>
{% endfor %}   

  <script type="text/javascript">
    google.charts.load("current", {packages:['corechart']});
    google.charts.setOnLoadCallback(drawDashboard);
    dataArrayTests.reverse()
    dataArrayTests.unshift(['Created', 'Passed', 'Passed with Bugs','In Process','Failed','Untested','Retest','Blocked','Functionality'])

    // Load the Visualization API and the controls package.
    // Packages for all the other charts you need will be loaded
    // automatically by the system.
    google.charts.load('current', {'packages':['corechart', 'controls']});

    // Set a callback to run when the Google Visualization API is loaded.
    google.charts.setOnLoadCallback(drawDashboard);

    function drawDashboard() {
    // Everything is loaded. Assemble your dashboard...

      var data = google.visualization.arrayToDataTable(dataArrayTests);

      var result = google.visualization.data.group(
          data,
          [0],
          [{'column': 1, 'aggregation': google.visualization.data.sum, 'type': 'number'},
          {'column': 2, 'aggregation': google.visualization.data.sum, 'type': 'number'},
          {'column': 3, 'aggregation': google.visualization.data.sum, 'type': 'number'},
          {'column': 4, 'aggregation': google.visualization.data.sum, 'type': 'number'},
          {'column': 5, 'aggregation': google.visualization.data.sum, 'type': 'number'},
          {'column': 6, 'aggregation': google.visualization.data.sum, 'type': 'number'},
          {'column': 7, 'aggregation': google.visualization.data.sum, 'type': 'number'}
        ]
      )
      var options = {
        height: 600,
        legend: { position: 'top' },
        bar: { groupWidth: '75%' },
        isStacked: true,
      };

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

    // Create a Category Filter, passing some options
    var functionalityFilter = new google.visualization.ControlWrapper({
        'controlType': 'CategoryFilter',
        'containerId': 'filter_div',
        'options': {
             //This gives an error right now since there is no column 8 in the view I create below. Index from 0-7 works without errors ... but these are not the columns I want to filter by
            'filterColumnIndex' : 8 
        }
    });

    // Create a ColumnChart, passing some options
    var columnStack = new google.visualization.ChartWrapper({
        'chartType': 'ColumnChart',
        'containerId': 'chart_div',
        'options': {
            "height": 600,
            "legend": { position: 'top' },
            "bar": { groupWidth: '75%' },
            "isStacked": true,
        }
    });

    // Create a view to filter out column 8 to avoid the error "All series on a given axis must be of the same data type"
    var view = new google.visualization.DataView(result)
    view.setColumns([0,1,2,3,4,5,6,7]);

    dashboard.bind(functionalityFilter, columnStack)
    dashboard.draw(view);
  }
  </script>


var dataArrayTests=新数组（）；
{test_details%]中的项的百分比}
dataArrayTests.push([
{{item[“created”]}}，
parseInt（{{item[“Passed”]}}}），
parseInt（“{item[”传递时发现错误“]}”），
parseInt（{{item[“In Process”]}}'），
parseInt（{{item[“Failed”]}}'），
parseInt（{{item[“Untested”]}}}），
parseInt（{item[“restest”]}}}），
parseInt（{{item[“Blocked”]}}}），
“{{功能}}”
]);
{%endfor%}
load（“当前”{packages:['corechart']}）；
google.charts.setOnLoadCallback（drawDashboard）；
dataArrayTests.reverse（）
dataArrayTests.unshift（['Created'、'Passed'、'Passed'with Bugs'、'In-Process'、'Failed'、'Untested'、'Retest'、'Blocked'、'Functional']））
//加载可视化API和控件包。
//将加载您需要的所有其他图表的包
//由系统自动执行。
load（'current'，{'packages'：['corechart'，'controls']}）；
//将回调设置为在加载Google Visualization API时运行。
google.charts.setOnLoadCallback（drawDashboard）；
函数drawDashboard（）{
//一切都已加载。组装仪表板。。。
var data=google.visualization.arrayToDataTable（dataArrayTests）；
var result=google.visualization.data.group(
数据，
[0],
[{'column'：1，“聚合”：google.visualization.data.sum，'type'：'number'}，
{'column'：2，'aggregation'：google.visualization.data.sum，'type'：'number'}，
{'column'：3，'aggregation'：google.visualization.data.sum，'type'：'number'}，
{'column'：4，'aggregation'：google.visualization.data.sum，'type'：'number'}，
{'column'：5，'aggregation'：google.visualization.data.sum，'type'：'number'}，
{'column'：6，'aggregation'：google.visualization.data.sum，'type'：'number'}，
{'column'：7，“聚合”：google.visualization.data.sum，'type'：'number'}
]
)
变量选项={
身高：600，
图例：{位置：'top'}，
条：{groupWidth:'75%}，
isStacked：是的，
};
//创建一个仪表板。
var dashboard=newgoogle.visualization.dashboard（document.getElementById（'dashboard_div'））；
//创建一个类别过滤器，传递一些选项
var functionatyfilter=新的google.visualization.ControlWrapper({
“controlType”：“CategoryFilter”，
“containerId”：“filter_div”，
“选项”：{
//由于我在下面创建的视图中没有第8列，因此现在出现了一个错误。0-7的索引可以正常工作，但这些不是我要筛选的列
“filterColumnIndex”：8
}
});
//创建一个柱形图，传递一些选项
var columnStack=new google.visualization.ChartWrapper({
“chartType”：“ColumnChart”，
“集装箱船”：“海图分区”，
“选项”：{
“高度”：600，
“图例”：{位置：'顶部'}，
“条”：{groupWidth:'75%}，
“isStacked”：没错，
}
});
//创建一个视图以过滤掉第8列，以避免错误“给定轴上的所有系列必须具有相同的数据类型”
var view=new google.visualization.DataView（结果）
视图.setColumns（[0,1,2,3,4,5,6,7]）；
dashboard.bind（FunctionityFilter、columnStack）
仪表板。绘制（视图）；
}

发现了错误

当推到“dataArrayTests”时，我在最后一列中有一个输入错误。{{functionality}}应该是{{item['functionality']}。因此，我想要筛选的列从未填充数据，因此无法运行

在dataArray中，我现在使用角色“tooltip”定义“功能”（第8列）。这样就不会考虑x轴，但我仍然可以使用它进行过滤

调整代码如下：

    <script type="text/javascript">
      var dataArrayTests = new Array();
    </script>

{% for item in test_details %}
    <script type="text/javascript">
        dataArrayTests.push([
            '{{ item["created"] }}',
            parseInt('{{ item["Passed"] }}'),
            parseInt('{{ item["Passed with bugs found"] }}'),
            parseInt('{{ item["In Process"] }}'),
            parseInt('{{ item["Failed"] }}'),
            parseInt('{{ item["Untested"] }}'),
            parseInt('{{ item["Retest"] }}'),
            parseInt('{{ item["Blocked"] }}'),
            '{{ item["functionality"] }}'
        ]);
    </script>
{% endfor %}   

  <script type="text/javascript">
    google.charts.load("current", {packages:['corechart']});
    google.charts.setOnLoadCallback(drawDashboard);
    dataArrayTests.reverse()
    dataArrayTests.unshift(['Created', 'Passed', 'Passed with Bugs','In Process','Failed','Untested','Retest','Blocked',{type: 'string', role: 'tooltip'}])

    // Load the Visualization API and the controls package.
    // Packages for all the other charts you need will be loaded
    // automatically by the system.
    google.charts.load('current', {'packages':['corechart', 'controls']});

    // Set a callback to run when the Google Visualization API is loaded.
    google.charts.setOnLoadCallback(drawDashboard);

    function drawDashboard() {
    // Everything is loaded. Assemble your dashboard...
        console.log(dataArrayTests)
      var data = google.visualization.arrayToDataTable(dataArrayTests);

      var result = google.visualization.data.group(
          data,
          [0],
          [{'column': 1, 'aggregation': google.visualization.data.sum, 'type': 'number'},
          {'column': 2, 'aggregation': google.visualization.data.sum, 'type': 'number'},
          {'column': 3, 'aggregation': google.visualization.data.sum, 'type': 'number'},
          {'column': 4, 'aggregation': google.visualization.data.sum, 'type': 'number'},
          {'column': 5, 'aggregation': google.visualization.data.sum, 'type': 'number'},
          {'column': 6, 'aggregation': google.visualization.data.sum, 'type': 'number'},
          {'column': 7, 'aggregation': google.visualization.data.sum, 'type': 'number'},
        ])

        result.sort([{column: 0}])

      var options = {
        height: 600,
        legend: { position: 'top' },
        bar: { groupWidth: '75%' },
        isStacked: true,
      };

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

    // Create a Category Filter, passing some options
    var functionalityFilter = new google.visualization.ControlWrapper({
        'controlType': 'CategoryFilter',
        'containerId': 'filter_div',
        'options': {
            'filterColumnIndex' : 8
        }
    });

    // Create a ColumnChart, passing some options
    var columnStack = new google.visualization.ChartWrapper({
        'chartType': 'ColumnChart',
        'containerId': 'chart_div',
        'options': {
            "height": 600,
            "legend": { position: 'top' },
            "bar": { groupWidth: '75%' },
            "isStacked": true
        }
    });
    
    dashboard.bind(functionalityFilter, columnStack)
    dashboard.draw(data);
  }
  </script>


var dataArrayTests=新数组（）；
{test_details%]中的项的百分比}
dataArrayTests.push([
{{item[“created”]}}，
parseInt（{{item[“Passed”]}}}），
parseInt（“{item[”传递时发现错误“]}”），
parseInt（{{item[“In Process”]}}'），
parseInt（{{item[“Failed”]}}'），
parseInt（{{item[“Untested”]}}}），
parseInt（{item[“restest”]}}}），
parseInt（{{item[“Blocked”]}}}），
“{{item[“functionality”]}”
]);
{%endfor%}
load（“当前”{packages:['corechart']}）；
google.charts.setOnLoadCallback（drawDashboard）；
dataArrayTests.reverse（）
dataArrayTests.unshift（['Created'、'Passed'、'Passed with bug'、'In Process'、'Failed'、'Untested'、'Retest'、'Blocked'、{type:'str'