Прокручиваемая столбчатая диаграмма с накоплением с использованием highcharts?

Мне нужно создать столбчатую диаграмму с накоплением для отображения данных, собранных для требования, как показано ниже.

Показать часы, отработанные сотрудником по разным проектам (Project1, Project2, Project3).

Я пробовал использовать Highcharts. Когда я попытался включить функцию прокрутки для диаграммы, поскольку количество сотрудников может быть больше, метки (имена сотрудников) не отображаются на оси X.

Также прокрутка кажется некорректной.

Может ли кто-нибудь помочь мне сделать эту диаграмму прокручиваемой, а также показать имена сотрудников в виде меток на оси X.

Я поделился диаграммой, которую создал до сих пор,

http://jsfiddle.net/sri421/Yyq5N/1/

Код также выглядит следующим образом: $ (function () {$ ('# container'). Highcharts ('StockChart', {

    chart: {
        type: 'column',
        inverted:true
    },
      title: {
            text: 'Total Hours worked Vs Different Projects'
        },
      xAxis: {
            categories: ['user1', 'user2', 'user3', 'user4', 'user5','user6', 'user7', 'user8', 'user9', 'user10','user11', 'user12', 'user13', 'user14', 'user15','user16', 'user17', 'user18', 'user19', 'user20'],
             labels: {
                rotation: -45,
                align: 'right',
                style: {
                    fontSize: '13px',
                    fontFamily: 'Verdana, sans-serif'
                }
            }

        },
    yAxis: {
            min: 0,
            title: {
                text: 'Total Hours Worked'
            },
            stackLabels: {
                enabled: true,
                style: {
                    fontWeight: 'bold',
                    color: (Highcharts.theme && Highcharts.theme.textColor) || 'red'
                }
            }
        },

        plotOptions: {
            column: {
                stacking: 'normal'

            }
        },
    scrollbar: {
        enabled:true

    },

    rangeSelector: {
        enabled: false
    },

    series: [{
            name: 'Project1',
            data: [5, 3, 4, 7, 2,5, 3, 4, 7, 2 ,5, 3, 4, 7, 2,5, 3, 4, 7, 2]
        }, {
            name: 'Project2',
           data: [2, 2, 3, 2, 1,5, 3, 4, 7, 2, 5, 3, 4, 7, 2,5, 3, 4, 7, 2]
        }, {
            name: 'Projecct3',
            data: [3, 4, 4, 2, 5,5, 3, 4, 7, 2, 5, 3, 4, 7, 2,5, 3, 4, 7, 2]
        }]
});

}); Спасибо, Шри


charts highcharts scrollable stacked
person javauser    schedule 31.03.2013    source источник
comment
Это вызвано использованием категорий в Highstock, которые не поддерживаются в Highstock. Таким образом, вы можете заменить его на highcharts jsfiddle.net/Yyq5N/3   -  person Sebastian Bochan    schedule 02.04.2013

Ответы (1)


arrow_upward
0
arrow_downward

Вы можете создавать столбчатые диаграммы с прокруткой / накоплением с помощью amCharts: http://jsfiddle.net/zeroin/mmmv2/

Код:


    AmCharts.ready(function () {
    var chartData = [
        {category:"user1", val1:1, val2:1, val3:1},
        {category:"user2", val1:2, val2:1, val3:2},
        {category:"user3", val1:1, val2:1, val3:4},
        {category:"user4", val1:2, val2:1, val3:2},
        {category:"user5", val1:1, val2:1, val3:5},
        {category:"user6", val1:2, val2:1, val3:2},
        {category:"user7", val1:1, val2:1, val3:3},
        {category:"user8", val1:2, val2:1, val3:1},
        {category:"user9", val1:1, val2:1, val3:3},
        {category:"user10", val1:2, val2:1, val3:4},
        {category:"user11", val1:1, val2:1, val3:3},
        {category:"user12", val1:2, val2:1, val3:3},
        {category:"user13", val1:1, val2:1, val3:3},
        {category:"user14", val1:2, val2:1, val3:1}
    ];

    var chart = new AmCharts.AmSerialChart();
    chart.pathToImages = "http://www.amcharts.com/lib/images/";
    chart.dataProvider = chartData;
    chart.categoryField = "category";

    var valueAxis = new AmCharts.ValueAxis();
    valueAxis.stackType = "regular";
    valueAxis.totalText = "[[total]]";
    chart.addValueAxis(valueAxis);

    var graph1 = new AmCharts.AmGraph();
    graph1.valueField = "val1";
    graph1.type = "column";
    graph1.fillAlphas = 1;
    chart.addGraph(graph1);

    var graph2 = new AmCharts.AmGraph();
    graph2.valueField = "val2";
    graph2.type = "column";
    graph2.fillAlphas = 1;
    chart.addGraph(graph2);

    var graph3 = new AmCharts.AmGraph();
    graph3.valueField = "val3";
    graph3.type = "column";
    graph3.fillAlphas = 1;
    chart.addGraph(graph3); 

    var chartScrollbar = new AmCharts.ChartScrollbar();
    chart.addChartScrollbar(chartScrollbar);

    chart.write("chartdiv");
});
person zeroin    schedule 01.04.2013