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

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

1 个答案: