將多種顏色應用於Google圖表中的單個元素

Question

以下內容涉及c＃cshtml頁面中的JavaScript腳本。

我已經定製了（在這個論壇的幫助下）一個谷歌圖表，條形圖讓我點擊每一列，並把我帶到另一個頁面。我現在想編輯這些列的顏色，但他們的方式谷歌圖表佈局他們的條形圖似乎使這有點尷尬。

在每個標題/列下，他們似乎認爲您將放置多個值（條），並且您可以自定義每個標題/列下的條的顏色。但是我對每個標題都有一個值，因此當將一種顏色應用到標題1的值1時，它會將該顏色應用於每個其他標題/列下的第一個（僅在我的情況下爲值）。

我想知道是否有一個id類型值，我可以硬編碼併爲該id分配一個顏色。

我寫的腳本如下，所有四個條藍色：

<script type="text/javascript"> 
    @{ 
    <text> 
    google.load("visualization", "1", { packages: ["corechart"] }); 
    google.setOnLoadCallback(drawChart); 
    function drawChart() { 
        var data = google.visualization.arrayToDataTable([ 
         ['Job State', 'link', 'Number of Jobs'], 
         ['Total Jobs', 'LINK', @Model.VARIABLE], 
         ['Live Jobs', 'LINK', @Model.VARIABLE], 
         ['Draft Jobs', 'LINK', @Model.VARIABLE], 
         ['Closed Jobs', 'LINK', @Model.VARIABLE] 
        ]); 
        var view = new google.visualization.DataView(data); 
        view.setColumns([0, 2]); 

        var options = { 
         title: "Job State Overview", 
         width: 600, height: 400, 
         vAxis: { title: "Number Of Jobs" }, 
         hAxis: { title: "Job States " }, 
         colors: ['blue', 'red', 'green', 'black'] 
        }; 

        var chart = new google.visualization.ColumnChart(
         document.getElementById('chart_div')); 
        chart.draw(view, options); 

        var selectHandler = function (e) { 
         window.location = data.getValue(chart.getSelection()[0]['row'], 1); 
        } 

        google.visualization.events.addListener(chart, 'select', selectHandler); 
       } 
       </text> 
         } 
</script> 

Answer 1

我發現一個黑客繞過它，但它不是理想的，因爲它縮小條的大小：

如下更換輸入陣列：

var data = google.visualization.arrayToDataTable([ 
         ['Job State', 'link', 'Total Jobs', 'Live Jobs', 'Draft Jobs', 'Closed Jobs'], 
         ['Total Jobs', '@Url.Content(string.Format("~/Activities/level1?job_Type_Id=5"))', @Model.jobCount, 0, 0, 0], 
         ['Live Jobs', '@Url.Content(string.Format("~/Activities/level1?job_Type_Id={0}",(int)JobState.GoLive))', 0,@Model.liveJobCount, 0, 0], 
         ['Draft Jobs', '@Url.Content(string.Format("~/Activities/level1?job_Type_Id={0}",(int)JobState.Draft))', 0, 0,@Model.draftJobCount, 0], 
         ['Closed Jobs', '@Url.Content(string.Format("~/Activities/level1?job_Type_Id={0}",(int)JobState.Closed))', 0, 0, 0,@Model.closedJobCount] 
        ]);