JQPlot分组堆积图形与不同的颜色

时间：2014-03-18 10:44:41

标签： jqplot

我正在尝试使用JQPlot生成以下图表

enter image description here 我尽可能地尝试了这个，但是脚本导致了一个激动人心的运行时，最终firefox出现了停止脚本通知。

有什么建议吗？ 

$(document).ready(function () {
    var assigned1 = [5, 12, 2, 0, 0, 4, 8];
    var assigned2 = [4, 0, 2, 0, 0, 2, 4];
    var assigned3 = [1, 0, 2, 0, 0, 2, 0];
    var assigned4 = [0, 0, 5, 0, 0, 3, 0];
    var assigned5 = [0, 0, 1, 0, 0, 0, 0];

    var assigned = [assigned1, assigned2, assigned3, assigned4, assigned5];
    var numCompleted = [assigned1, assigned2, assigned3, assigned4, assigned5]; //[4,3,6,5,5,4,0,0,5,4,0,0,0,0];
    //[1,1,0,0,2,2,8,7,4,4,11,10,1,1];
    //var test3 = [4,6,3,8,6,3,1,9,1,5,3,6,7,4];

    var dates = ['Assigned', 'Employee', 'Machine', 'Assigned', 'Employee', 'Machine', 'Assigned', 'Employee', 'Machine', 'Assigned', 'Employee', 'Machine', 'Assigned', 'Employee', 'Machine', 'Assigned', 'Employee', 'Machine', 'Assigned', 'Employee', 'Machine'];

    plot3 = $.jqplot('chart3', [assigned, numCompleted], {
        // Tell the plot to stack the bars.
        seriesColors: ["#81a7d4", "#d0d0d0", "#fac"],
        stackSeries: true,
        shadow: false,
        title: 'Cell Name',
        animate: false,
        captureRightClick: false,
        grid: {
            drawGridLines: false,
            shadow: false
        },

        legend: {
            show: false,
        },
        seriesDefaults: {
            renderer: $.jqplot.BarRenderer,
            rendererOptions: {
                barMargin: 10,
                barPadding: 0,
                shadowOffset: 0,
                groups: 7,
                highlightMouseDown: true
            },
            pointLabels: {
                show: true,
                hideZeros: true,
                edgeTolerance: 10
            }
        },
        grid: {
            gridLineColor: '#fff',
            borderWidth: 0,
            shadow: false,
            background: "white"
        },
        axes: {
            xaxis: {
                renderer: $.jqplot.CategoryAxisRenderer,
                ticks: dates,
                showTickMarks: false
            },
            yaxis: {
                showTicks: false
            }
        }
    });
});

http://jsfiddle.net/K5cjj/1/

1 个答案:

答案 0 :(得分：1)

我设法通过将多个图形绘制到同一元素来实现此目的。这有其他问题，但似乎有效，任何人都可以扩展这个以使点击功能在所有栏上工作

然而，这仅适用于Firefox，Chrome和IE11，IE 10及以下版本都搞砸了（像往常一样）

http://jsfiddle.net/LADzf/1 

$(document).ready(function(){
    /* graph config */
    var maxVal = 13;

    /* graph vals */
    var assigned1 = [5, 0, 0, 0, 12, 0, 0, 0, 2, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 4, 0, 0, 0, 8, 0, 0];
    var assigned2 = [3, 0, 0, 0, 0, 0, 0, 0, 4, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 8, 0, 0, 0, 2, 0, 0];
    var assigned3 = [2, 0, 0, 0, 0, 0, 0, 0, 4, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 2, 0, 0];
    var assigned4 = [0, 0, 0, 0, 0, 0, 0, 0, 2, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0];

    var employee1 = [0, 5, 0, 0, 0, 10, 0, 0, 0, 4, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 12, 0, 0, 0, 12, 0];
    var employee2 = [0, 5, 0, 0, 0, 2, 0, 0, 0, 8, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]; 
    var machine = [0, 0, 12, 0, 0, 0, 12, 0, 0, 0, 12, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 12, 0, 0, 0, 12];

    var basevals = [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0];

    /* graph ticks */
     var ticks = ['Assigned', 'Employee', 'Machine', ' ', 'Assigned', 'Employee', 'Machine', ' ', 'Assigned', 'Employee', 'Machine', ' ', 'Assigned', 'Employee', 'Machine', ' ', 'Assigned', 'Employee', 'Machine', ' ', 'Assigned', 'Employee', 'Machine', ' ', 'Assigned', 'Employee', 'Machine'];
    var blankticks = [' ', ' ', ' ', ' ', ' ', ' ', ' ', ' ', ' ', ' ', ' ', ' ', ' ', ' ', ' ', ' ', ' ', ' ', ' ', ' ', ' ', ' ', ' ', ' ', ' ', ' ', ' '];
    var dateticks = ['<br><br><br><br>01/01/2014', '<br><br><br><br>02/01/2014', '<br><br><br><br>03/01/2014', '<br><br><br><br>04/01/2014', '<br><br><br><br>05/01/2014', '<br><br><br><br>06/01/2014', '<br><br><br><br>07/01/2014'];


    /* plot the base graph */
    plotbase = $.jqplot('chart3', [basevals], {
        seriesDefaults:{
            renderer:$.jqplot.BarRenderer,
            rendererOptions: {barMargin: 10},
            pointLabels: {show: false}
        },
        axesDefaults: {show: false}, 
        tickOptions: {showMark: false, angle: 90}, 
        axes: {
            showLabel: false, 
            xaxis: {
                renderer: $.jqplot.CategoryAxisRenderer, 
                ticks: dateticks, 
                tickOptions: {markSize: 0}
            }, 
            yaxis: {
                padMin: 0, 
                min: 0,
                max: maxVal, 
                showLabel: false, 
                show: false
            }
        }
    }); 


    plot3 = $.jqplot('chart3', [machine], {
        seriesColors: ["#a62525"], 
        stackSeries: true,
        captureRightClick: true,
        seriesDefaults:{
            renderer:$.jqplot.BarRenderer,
            rendererOptions: {
                barMargin: 10, 
                highlightMouseOver: true 
            },
            pointLabels: {show: false}
        },
        axesDefaults: {show: false}, 
        tickOptions: {showMark: false, angle: 90}, 
        axes: {
            showLabel: false, 
            xaxis: {
                renderer: $.jqplot.CategoryAxisRenderer, 
                ticks: blankticks, 
                tickOptions: {markSize: 0}
            },
            yaxis: {
                padMin: 0, 
                min: 0,
                max: maxVal, 
                showLabel: false, 
                show: false
            }
        }
    });


    plot2 = $.jqplot('chart3', [employee1, employee2], {
        seriesColors: ["#67ce64", "#da9831"], 
        stackSeries: true,
        captureRightClick: true,
        seriesDefaults:{
            renderer:$.jqplot.BarRenderer,
            rendererOptions: {barMargin: 10, highlightMouseOver: true},
            pointLabels: {show: false}
        },
        axesDefaults: {show: false}, 
        tickOptions: {showMark: false}, 
        axes: {
            showLabel: false, 
            xaxis: {
                renderer: $.jqplot.CategoryAxisRenderer, 
                ticks: blankticks
            },
            yaxis: {
                padMin: 0, 
                min: 0,
                max: maxVal, 
                showLabel: false, 
                show: false
            }
        },
        grid: {background: 'transparent', drawGridLines: false, gridLineColor: 'transparent', borderColor: 'transparent'}
    });


    plot1 = $.jqplot('chart3', [assigned1, assigned2, assigned3, assigned4], {
        stackSeries: true,
        captureRightClick: true,
        seriesColors: ["#effa38", "#37d1f8", "#5129b6"], 
        seriesDefaults:{
            renderer:$.jqplot.BarRenderer,
            rendererOptions: {barMargin: 10, highlightMouseOver: true },
            pointLabels: {show: false}
        },
        axes: {
            xaxis: {
                renderer: $.jqplot.CategoryAxisRenderer, 
                tickRenderer:$.jqplot.CanvasAxisTickRenderer,
                ticks: ticks, 
                tickOptions: {
                    angle: -90, 
                }
            },
            yaxis: {
                padMin: 0, 
                min: 0,
                max: maxVal
            }
        }, grid: {background: 'transparent', drawGridLines: false, gridLineColor: 'transparent', borderColor: 'transparent'}
    });




    $('#chart3').bind('jqplotDataClick', function (ev, seriesIndex, pointIndex, data) {
        $('#info3').html('series: '+seriesIndex+', point: '+pointIndex+', data: '+data);
    });

});
相关问题
最新问题