Question

我无法通过python图层gviz_api将color_properties像color一样传播到我的Google图表中。

我想创建一个带有单独颜色条形的条形图，例如：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>

Answer 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"}]

这应该有效，除非列的顺序搞砸了。确保订单是测试，持续时间，属性。如果它的测试，属性，持续时间不会产生错误，它就无法工作。如果您最终没有先测试，则会弹出域错误。

希望这有助于任何想要这样做的人！

Answer 2

在与gviz_api进行了更多的斗争并看了一眼其实现后，我放弃了并决定不使用gviz_api包装器。相反，我通过数组将数据传输到模板，并获得了我所追求的单独颜色的条形图。通过gviz_api依赖关系，Google Chart, different color for each bar获得了良好的信息。

generate.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)

template.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（）方法。

通过gviz_api提供google图表自定义属性，如颜色

2 个答案: