ZingChart의 원형 차트 옵션

지금 저는 jQuery로 차트를 만들고 있습니다.ZingChart의 원형 차트 옵션

처음에는 HighCharts를 사용하여 차트를 만들었지 만 개인 라이센스가 아닌 개인 프로젝트에서는 라이센스를 사용할 수 없습니다.

그래서 나는 ZingChart를 사용하기로 결정했으나 몇 가지 문제가 있습니다.

먼저 다른 슬라이스를 클릭하면 내 차트 조각이 자동으로 닫힙니다.

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의 원형 차트 옵션

답변

관련 문제