通过 gviz_api 提供谷歌图表自定义属性，如颜色答案

【问题标题】：Feed google charts custom properties like color through gviz_api通过 gviz_api 提供谷歌图表自定义属性，如颜色
【发布时间】：2015-01-15 00:38:07
【问题描述】：

我无法通过 python 层 gviz_api 将 custom_properties（如颜色）传播到我的谷歌图表中。

我想创建一个带有单独颜色条的条形图，例如此处的示例：https://developers.google.com/chart/interactive/docs/gallery/barchart#BarStyles

但我不知道如何通过 gviz_api (http://code.google.com/p/google-visualization-python/) 进行设置。

我可以以任何方式提供数据，字典、列表、连音，一次一行，只要我可以单独为条形着色。这是我最新的非工作尝试，generate.py：

import gviz_api
def main():
    # Creating the data
    description = {"test" : ("string", "Test name"),
                   "duration" : ("number", "Duration")}
    data = [dict(test="test A", duration=1000, custom_properties={"role":"color:green"}),
            {"test": "test B", "duration": 4000}]

    # Loading it into gviz_api.DataTable
    data_table = gviz_api.DataTable(description, custom_properties={"role":"style"})
    data_table.LoadData(data)

    # Creating a JSon string
    json = data_table.ToJSon(columns_order=("test", "duration"), order_by="test")

    # Read page_template from file
    f = open('template.html', 'r')
    page_template = f.read()
    # Putting the JSon string into the template
    print page_template.format(json)

if __name__ == '__main__':
    main()

以及对应的template.html：

<html>
<script src="https://www.google.com/jsapi" type="text/javascript"></script>
<script>
google.load('visualization', '1', {{packages:['corechart']}});

google.setOnLoadCallback(drawChart);
function drawChart() {{
  var options = {{
    title: 'Test results',
    legend: 'none',
    chartArea: {{ width: "50%", height: "70%" }}
  }}

  var json_chart = new google.visualization.BarChart(document.getElementById('chart_div'));
  var json_data = new google.visualization.DataTable({0}, 0.6);
  json_chart.draw(json_data, options);
}}
</script>
<body>
  <div id="chart_div"></div>
</body>
</html>

【问题讨论】：

标签： python google-visualization

【解决方案1】：

我找到了解决方案。

在您的描述/数据中，添加将包含您的属性的第三列。

description = {"test" : ("string", "Test name"),
                   "duration" : ("number", "Duration"), "property": ("string", '', {'role':'style'})}

data = [dict(test="test A", duration=1000, property = "color:green" ),
            {"test": "test B", "duration": 4000, property = "color:red"}]

这应该可以工作，除非列的顺序搞砸了。确保顺序是测试、持续时间、属性。如果它是测试，属性，持续时间，它将无法工作，并且不会出现错误。如果您最终没有先进行测试，则会弹出域错误。

希望这可以帮助任何想要这样做的人！

【讨论】：

您可以（重新）提及在调用数据表的 ToJSon() 方法时可以修复列顺序，即在 OP 中它将是 data_table.ToJSon(columns_order=("test", "duration", "property"), order_by="test")

【解决方案2】：

在使用 gviz_api 进行了更多尝试并查看了它的实现之后，我放弃了并决定不使用 gviz_api 包装器。相反，我通过数组将数据传输到模板，并获得了我所追求的单独颜色的条形。排除了 gviz_api 依赖项后，Google Chart, different color for each bar 拥有了很好的信息。

生成.py：

f = open('template.html', 'r')
page_template = f.read()
f.close()

testData = ['Test 1', 43, 'PASS', 'Test 2', 54, 'FAIL']

print page_template.format(testData)

模板.html：

<html>
<script src="https://www.google.com/jsapi" type="text/javascript"></script>
<script type="text/javascript">
google.load("visualization", '1.1', {{packages:['corechart']}});
google.setOnLoadCallback(drawChart);
function drawChart() {{
  var options = {{
    title: 'Test results',
    legend: 'none',
    chartArea: {{ width: "50%", height: "70%" }}
  }}

  var barChart = new google.visualization.BarChart(document.getElementById('chart_div'));
  var dataTable = new google.visualization.DataTable();
    dataTable.addColumn('string', 'Test name');
    dataTable.addColumn('number', 'Duration');
    dataTable.addColumn({{ type: 'string', role: 'style' }});

    // Import array with contents: [<test name>, <duration>, <result>, .. }}
    testData = {0}

    dataTable.addRows(testData.length/3);
    for (i = 0; i < testData.length/3;i++) {{
      dataTable.setValue(i, 0, testData[i*3]);
      dataTable.setValue(i, 1, testData[i*3+1]);
      if (testData[i*3+2] == 'PASS') {{
        dataTable.setValue(i, 2, 'color:green');
      }} else
        dataTable.setValue(i, 2, 'color:red');
      }}
    }}
    barChart.draw(dataTable, options);
  }}
</script>
<body>
  <div id="chart_div"></div>
</body>
</html>

模板中的双花括号用于启用 python string.format() 方法。

【讨论】：