Google 차트의 타임 라인에서 색상을 인식하지 못합니다.

Question

컨트롤러에서 선택한 일부 기준에 따라 원하는 색상을 타임 라인에서 표시하려고합니다. 내가 페이지에 렌더링

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

하고 스크립트 : 데이터가 옆으로 사용되는 JSON

<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> 

문제는 내가 원하는대로 바 색상하지 않는 것입니다. 나는 또한 'color : # 435278'과 같은 결과를 얻으 려 노력했다.

Answer 1

열은 순서가 중요하므로 Google Charts는 스타일 열이 세 번째 인 경우에만 인식합니다. 나는 이것과 일치하는 json를 형성했다. 그리고 모든 것은 ok이었다. 새로운 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}]}] 

}