gráfico de linhas d3.js aprofundar para gráfico de barras para uma mesa

votos
0

Fui pesquisar todo o dia e talvez eu não usar as palavras certas para encontrar o que eu quero. Na minha pesquisa eu encontrei esta solução jsFiddle que eu mudei para fazer alguns que imitar o que eu quero. Aqui está o código jsFiddle: http://jsfiddle.net/nmxj67t9/29/

$(function () {
// Create the chart

tableBack = function(){
 $(#container).show();
    // remove the existing table
    $('#here_table .table').remove();
}
var createTable = function(data) {

    //console.log($series = %o, $chart);
    $(#container).hide();
    // remove the existing table
    $('#here_table .table').remove();

    // create a table object
    var table = $('<div class=table><a href=# class=back onclick=tableBack()>back</a><table></table></div>').addClass('chart-table');

    // iterate the series object, create rows and columnts
    $.each(data, function( index, value ) {
        var row = $('<tr></tr>').addClass('chart-row');
        var col1 = $('<td></td>').text(value.name).appendTo(row);
        var col2 = $('<td></td>').text(value.y).appendTo(row);

        // mark the row of the clicked sector


        table.append(row);
    });

    // insert the table into DOM
    $('#here_table').append(table);
};
$('#container').highcharts({
chart: {
    type: 'line'  // Mentioned only pie.Need different graph on individual level.
},
title: {
    text: 'Basic drilldown'
},
xAxis: {
    type: 'category'
},
plotOptions: {
    series: {
        borderWidth: 1,
        dataLabels: {
            enabled: true,
        }
    }
},
series: [{
    id: 'toplevel',
    name: 'Month',
    data: [
        {name: 'January', y: 4, drilldown: 'level1'}, //Level-1
        {name: 'March', y: 2, drilldown: 'level1'},
        {name: 'April', y: 1, drilldown: 'level1'},
        {name: 'May',y: 2, drilldown: 'level1'},
        {name: 'June', y: 1, drilldown: 'level1'},
        {name: 'July', y: 6, drilldown: 'level1'},
        {name: 'August', y: 8, drilldown: 'level1'}
    ]
}],
drilldown: {
    series: [ { 
        id:'level1',
        name: 'Level 1',
        type: 'bar',
        data: [
            {name: 'Nurs', y: 1, drilldown: 'level2'},
            {name: 'Rec', y: 2, drilldown: 'level2'},
            {name: 'HSKP', y: 3, drilldown: 'level2'},
            {name: 'CHEF', y: 4, drilldown: 'level2'} //Level-2
        ] 
    },{                
        id:'level2',
        name: 'Level 2',
        type: 'bar',
        point: {
                events: {
                    click: function () {
                        console.log(this);
                        if(this.name == Deeper Level-3){
                           var data = [
            {name:'Violet', y:1},
            {name:'Red',y:2},
            {name:'Yellow', y:3}
        ];
                           createTable(data);
                        }

                    }
                }
            },
        data: [
            {name: 'Green', y:1},
            {name: 'Red', y:2},
            {name: 'Blue', y:3},
            {id:test,name: 'Deeper Level-3', y: 4} //Level-3
        ] 
    },{
        id: 'level3',
        name: 'Level 3',
        type: 'bar',
        data: [
            {name:'Violet', y:1},
            {name:'Red',y:2},
            {name:'Yellow', y:3}
        ]
    }]
}
    });

});

Eu tenho três perguntas em relação a este código. 1. Como faço para definir o código para não ser codificado para os dados? Eu gostaria de deixá-la aberta para que eu possa fazer várias tabelas usando diferentes fontes de dados. 2. Como faço para ir sobre como definir este código até puxar para poder BI? 3. Como faço para adicionar codificação extra para que eu possa aprofundar-se mais níveis antes do gráfico? Eu gostaria de ir de departamento em tempos de mudança (d, e, n) para o papel depois de papel para o bairro, em seguida, uma vez por bairro é selecionado alteração à tabela e listar os empregados naquele bairro.

Tenho estado a jogar e pesquisando e eu estou em uma perda para saber como fazer isso.

obrigado

Jes

Publicado 20/09/2018 em 04:09
fonte usuário
Em outras línguas...                            

Cookies help us deliver our services. By using our services, you agree to our use of cookies. Learn more