ZingChart中的餅圖選項

首先，我使用HighCharts製作圖表，但其許可證不允許在非個人項目中使用它。

因此，尋找替代品我決定使用ZingChart，但我有一些問題。

首先，當我點擊另一個切片時，我想讓我的圖表切片自動「關閉」。

With HighCharts這是行爲 here 。似乎是一個開箱即用的功能。

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

你能幫助我嗎？提前致謝。

問候！

來源

2017-10-16 Nahuel Rodriguez

最後，我發現如何動畫片。代碼如下：

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事件我沒有找到更好的方法。我認爲這個問題關閉了。

來源

2017-10-20 12:14:19

ZingChart中的餅圖選項

回答

相關問題