ZingChartの円グラフオプション

Question

今、私はjQueryでチャートを作成しています。

最初にHighChartsを使用してグラフを作成しましたが、そのライセンスでは非個人用プロジェクトでは使用できません。

私はZingChartを使用することを決めましたが、いくつかの問題があります。

まず、別のスライスをクリックすると、自分のグラフのスライスを自動的に「閉じる」ようにします。

HighChartsでは、これは動作 です。 すぐに使用できる機能のようです。

ZingChartでは、 のようになります。 ドキュメントを検索しましたが、動作させる方法が見つかりませんでした。

HighChartsではすべてのスライスをクリックすることができます。クリックしたスライスのデータを含むテーブルを表示するために使用したイベントを発生させます。 ZingChartで私は方法を見つけましたが、私はそれが巧妙で清潔ではないと思います。

私の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%" 
}); 

これは、私はonClickイベントを「解決」する方法ですが、私はそれが最善の方法（実際には、私はそれを好きではない）かどうか分かりません。

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); 
} 

ここではHighChartsコードを入れました。 plotOptionsでは、私はきれいだと思うようにonClickイベントを管理できます。注意：私は後でテーブルを描画するために使用するデータ配列にフィールド（ "estado"）を追加します。

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 
      } 
     ] 
    }] 
}); 

お願いします。前もって感謝します。

おはようございます！

Answer 1

最後に、スライスをアニメーション化する方法を見つけました。コードは次のとおりです。

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 
    }); 

}

スライスのonClickイベントについて、私はより良いアプローチを見つけられませんでした。 私はこの質問を閉じたと考えます。