Google柱形图 - 为每列显示不同的颜色

时间:2015-10-01 07:15:50

标签: javascript jquery charts google-api google-visualization

        google.load("visualization", "1", {packages: ["corechart", "bar"]});
        google.setOnLoadCallback(drawStuff);

        function drawStuff() {

            var timesheetRes = ["Resouce 1","Resouce 2","Resouce 3","Resouce 4","Resouce 5"];
            var timesheetWeek = ["Week 1","Week 2","Week 3","Week 4","Week 5"];
            var timesheetHours = [45,40,40,0,0];

            var dataArray = [['Resources', 'Week', 'Hours']];
            for (var n = 0; n < timesheetHours.length; n++) {
                dataArray.push([timesheetRes[n], timesheetWeek[n], timesheetHours[n]]);
            }
            var data = new google.visualization.arrayToDataTable(dataArray);

            var color = <?php echo $json_color_str ?>;
            var color_count = <?php echo $color_count ?>;

            for (var i = 0; i < color_count; i++) {

            var color_str = color[i];

            var options = {
            width: 700,
            height: 350,
            legend: {position: 'none'},
            bar: {groupWidth: '50%'},
            isStacked: true,
            tooltip: {trigger: 'none'},
            colors: color_str, //being passed in array format for each bar
            hAxis: {title: "Resource(s)",
                titleTextStyle: {color: '#e91e63', bold: 1, fontSize: 14}},
            vAxis: {title: "Week(s)",
                ticks: weekAxis(),
                gridlineColor: 'transparent',
                titleTextStyle: {color: '#F4B400', bold: 1, fontSize: 14}
            }
        };

            var chart = new google.visualization.ColumnChart(document.getElementById("top_x_div"));
            chart.draw(data, options);
    }



}

function weekAxis() {

    var ticks = new Array();
    var week_count = <?php echo $week_no ?>; //count number of weeks

    for (i = 1; i <= week_count; i++) {
        var tick_str = {};
        tick_str['v'] = (week_count * i);
        tick_str['f'] = 'Week ' + i;
        ticks.push(tick_str);
    }
    return ticks;

}


    <script type="text/javascript" src="https://www.google.com/jsapi"></script> 
    <div id="top_x_div"></div>

当前输出

enter image description here

预期输出

enter image description here

其中Week(s)将显示在 vAxis 上,而Resource(s)将显示在 hAxis 上。在这里,我更改了hAxisvAxis值以显示周和     资源分别显示修复4/5/6图表部分,考虑一个月内weeks的数量。

通过为每个条形图传递颜色数组来尝试循环options,但它只传递最后一个数组,因此为每个条形图及其列显示相同的颜色。

  • 如何根据颜色字符串更改图表列的颜色 如预期输出图像所示通过?

或者是否可以使用jQuery?

0 个答案:

没有答案