将多种颜色应用于谷歌图表中的单个元素

Applying multiple colors to a single element in google charts

本文关键字：单个元素谷歌颜色应用于更新时间：2023-09-26

下面指的是 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>

我找到了一个技巧来绕过它，但它并不理想，因为它缩小了条形的大小：

按如下方式替换输入数组：

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]
                    ]);