Options de graphique à secteurs dans ZingChart

Question

En ce moment, je crée des graphiques avec jQuery.

D'abord j'ai utilisé HighCharts pour faire les graphiques, mais sa licence ne permet pas de l'utiliser dans des projets non personnels. Donc, en regardant des alternatives j'ai décidé d'utiliser ZingChart mais j'ai quelques problèmes avec ça.

Je veux d'abord que les tranches de ma carte se "ferment" automatiquement lorsque je clique sur une autre tranche. Avec HighCharts, c'est le comportement . Semble être une fonctionnalité prête à l'emploi. Avec ZingChart, il ressemble à ceci: . J'ai cherché dans sa documentation mais je n'ai pas trouvé comment le faire fonctionner. Avec Highcharts je peux cliquer sur chaque tranche et déclencher un événement que j'ai utilisé pour afficher une table avec des données de la tranche où j'ai cliqué. Avec ZingChart, j'ai trouvé un moyen mais je pense que ce n'est pas intelligent et propre.

Voici mon code ZingChart.

var dataSeries = [ 
    { 
     text: 'Cantidad de habitaciones sucias', 
     values:[Object.keys(${listaDeHabitacionesSucias}).length] 
    }, 

    { 
     text: 'Cantidad de habitaciones para repasar', 
     values:[Object.keys(${listaDeHabitacionesParaRepasar}).length] 
    }, 

    { 
     text: 'Cantidad de habitaciones disponibles', 
     values:[Object.keys(${listaDeHabitacionesDisponibles}).length] 
    } 
]; 

var configuracion = { 
    type:"pie3d", 
    title:{ 
     text:"Estado de las habitaciones" 
    }, 
    plot: { 
     tooltip: { 
      "text":"%t: %v (%npv%)" 
     } 
     }, 
    series: dataSeries 
}; 

zingchart.render({ 
    id : 'chart-container', 
    data : configuracion, 
    height: 400, 
    width: "100%" 
}); 

Voilà comment je « résolu » l'événement onClick, mais je ne suis pas sûr que ce soit la meilleure façon (en fait, je ne l'aime pas).

zingchart.plot_click = function(e) { 
    var estadoHabitacion = null; 
    switch(e.plotindex) { 
     case 0: 
      estadoHabitacion = "Sucia"; 
      break; 
     case 1: 
      estadoHabitacion = "Para repasar"; 
      break; 
     case 2: 
      estadoHabitacion = "Disponible"; 
      break; 
     default: 
      break; 
    } 

    $(".table").show(); 

    crearTabla(estadoHabitacion); 
} 

Ici, je mets le code HighCharts. Dans plotOptions, je peux gérer l'événement onClick d'une manière que je considère comme propre. Remarque J'ajoute un champ ("estado") dans le tableau de données que j'ai utilisé plus tard pour dessiner la table.

Highcharts.chart('chart-container', { 
    chart: { 
     type: 'pie', 
     options3d: { 
      enabled: true, 
      alpha: 45, 
      beta: 0 
     } 
    }, 
    title: { 
     text: 'Estado de las habitaciones' 
    }, 
    tooltip: { 
     pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>' 
    }, 
    plotOptions: { 
     pie: { 
      allowPointSelect: true, 
      cursor: 'pointer', 
      point: { 
       events: { 
        click: function() { 
         $(".table").show(); 
         crearTabla(this.options.estado); 
        } 
       } 
      },   
      depth: 35, 
      dataLabels: { 
       enabled: true, 
       format: '{point.name}' 
      } 
     } 
    }, 
    series: [{ 
     type: 'pie', 
     name: 'Porcentaje', 
     data: [ 
      { name: 'Cantidad de habitaciones sucias', y: ${cantidadDeHabitacionesSucias}, estado: 'Sucia'}, 
      { name: 'Cantidad de habitaciones para repasar', y: ${cantidadDeHabitacionesParaRepasar}, estado: 'Para repasar'}, 
      { 
       name: 'Cantidad de habitaciones disponibles', 
       y: ${cantidadDeHabitacionesDisponibles}, 
       estado: 'Disponible', 
       sliced: true, 
       selected: true 
      } 
     ] 
    }] 
}); 

Pouvez-vous m'aider s'il vous plaît? Merci d'avance.

Salutations!

Answer 1

Enfin j'ai trouvé comment animer les tranches. Le code est le suivant:

zingchart.plot_click = function(e) { 
    var dataSlice = dataSeries[p.plotindex]; 

    isOpen = (dataSlice.hasOwnProperty('offset-r')) ? (dataSlice['offset-r'] !== 0) : false; 

    if(dataSlice) { 
     dataSlice['offset-r'] = 0; 
    } 

    else { 
     for(var i = 0 ; i< dataSeries.length; i++) { 
      dataSeries[i]['offset-r'] = 0; 
     } 
     dataSlice['offset-r'] = 20; 
    } 

    zingchart.exec('chart-container', 'setdata', { 
     data : configuration 
    }); 

};

Pour l'événement onClick de tranche I, je n'ai pas trouvé de meilleure approche. Je considère que cette question est fermée.