0

以下引用了 ac#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>
4

1 回答 1

0

我发现了一个绕过它的技巧，但它并不理想，因为它缩小了条的大小：

替换输入数组如下：

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]
                    ]);
于 2013-10-21T16:19:29.003 回答