Question

我试图在每列中添加不同的颜色，我有以下代码来绘制图表：

var formDataKinder = {type:"Kinder"};
var jsonDataKinder = $.ajax({
    type: "POST",
    data : formDataKinder,      
    url: "./content/chartsData.php",
    dataType:"json",
    async: false
}).responseText;

var dataKinder = new google.visualization.DataTable(jsonDataKinder);

var optionsKinder = {
    legend: 'none',
    chartArea: {'width': '80%', 'height': '80%'}
};

var chartKinder = new google.visualization.ColumnChart(document.getElementById('Kinderchart'));
chartKinder.draw(dataKinder, optionsKinder);

我在数组中添加样式但列不会更改：

{"cols": [
        {"id":"","label":"Grado","pattern":"","type":"string"},
        {"id":"","label":"Estudiantes","pattern":"","type":"number"},
        {"id":"","role":"style","type":"string"}
    ],
    "rows": [
        {"c":[{"v":"1ro.","f":null},{"v":8,"f":null},{"p":"color: #A22979","f":null}]},
        {"c":[{"v":"2do.","f":null},{"v":23,"f":null},{"p":"color: #1D63BB","f":null}]},
        {"c":[{"v":"3ro.","f":null},{"v":32,"f":null},{"p":"color: #D72D16","f":null}]}         
]}

有什么想法吗？

Answer 1

希望这有帮助。

{"cols": [
        {"id":"","label":"Grado","pattern":"","type":"string"},
        {"id":"","label":"Estudiantes","pattern":"","type":"number"},
        {"id":"","role":"style","type":"string"}
    ],
    "rows": [
        {"c":[{"v":"1ro.","f":null},{"v":8,"f":null},{"v":"#A22979","f":null}]},
        {"c":[{"v":"2do.","f":null},{"v":23,"f":null},{"v":"#1D63BB","f":null}]},
        {"c":[{"v":"3ro.","f":null},{"v":32,"f":null},{"v":"#D72D16","f":null}]}         
]}

执行DataTable.toJSON()后，您可以使用google.visualization.arrayToDataTable()了解DataTable的JSON结构。
https://developers.google.com/chart/interactive/docs/gallery/columnchart

Google Column Chart使用json更改每列的颜色

1 个答案: