Question

现在我正在用jQuery创建图表。

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

你能帮帮我吗？提前谢谢。

问候！

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事件，我没有找到更好的方法。我认为这个问题已经结束了。

ZingChart中的饼图选项

1 个答案: