Question

我试图根据我在控制器中选择的一些标准，从时间轴上为我想要的颜色着色一些条形。接下来用作数据的Json是：

{
  "cols": [
    { "id": "", "label": "Project Name", "pattern": "", "role": "", "type": "string" },
    { "id": "", "label": "Period", "pattern": "", "role": "", "type": "string" },
    { "id": "", "label": "Start", "pattern": "", "role": "", "type": "date" },
    { "id": "", "label": "End", "pattern": "", "role": "", "type": "date" },
    { "id": "", "label": "", "pattern": "", "role": "style", "type": "string"}],
  "rows": [
    { "c": [{ "v": "test", "f": null},{"v": "Fesability", "f": null},{"v": 1504224000000,"f": null},{"v": 1504742400000,"f": null},{"v": "#45a128","f": null}]},
    { "c": [{ "v": "test", "f": null},{"v": "Conceptual", "f": null},{"v": 1504742400000,"f": null},{"v": 1505347200000,"f": null},{"v": "#45a128","f": null}]}]
}

以及我在页面中呈现的脚本：

<script>
    google.charts.load('current', { 'packages': ['timeline'] });
    google.charts.setOnLoadCallback(drawChart);

    function drawChart() {
        var jsonData = $.ajax({
            url: '/Report/RetrieveData?projectLeader=@ViewBag.ProjectLeader',
            dataType: "json",
            async: false
        }).responseText;


        // Create our data table out of JSON data loaded from server.
        var data = new google.visualization.DataTable(jsonData);

        // Instantiate and draw our chart, passing in some options.
        var chart = new google.visualization.Timeline(document.getElementById('timeline'));

        chart.draw(data);
    }
</script>

问题是它没有按我想要的颜色着色。我也试过用颜色：＃435278＆＃39;，结果相同，不起作用。

Answer 1

订单对于列很重要，因此Google图表只会在第三个列中识别样式列。我形成了json以匹配这一切，一切都很好。新的json看起来像这样：

{
  "cols": [
    { "id": "", "label": "Project Name", "pattern": "", "role": "", "type": "string" },
    { "id": "", "label": "Period", "pattern": "", "role": "", "type": "string" },
    { "id": "", "label": "", "pattern": "", "role": "style", "type": "string"}
    { "id": "", "label": "Start", "pattern": "", "role": "", "type": "date" },
    { "id": "", "label": "End", "pattern": "", "role": "", "type": "date" }],
   "rows": [
    { "c": [{ "v": "test", "f": null},{"v": "Fesability", "f": null},{"v": "#45a128","f": null},{"v": 1504224000000,"f": null},{"v": 1504742400000,"f": null}]},
    { "c": [{ "v": "test", "f": null},{"v": "Conceptual", "f": null},{"v": "#45a128","f": null},{"v": 1504742400000,"f": null},{"v": 1505347200000,"f": null}]}]

}

Google图表中的时间轴无法识别颜色

1 个答案: