javascript - 禁用点不隐藏。 [ Highcharts ]

Question

很高兴认识你。 我的图表有问题。

我有一个包含一些招聘流程数据的数据库。该进程有多种状态:“ENDED”、“WORKING”、“STANDBY”、“CANCELLED”。该过程一次只有一次。

我需要使用堆积柱，因为如果使用普通堆积柱，它会让我看到很小的条。

我已经得到了我想要的所有内容，但是当我单击图例时，如果没有极端情况，数据类别就会保留。

Here the gif showing what I mean

这是代码:

 var ch = Highcharts.chart('barChartContainer', {
    chart: {
        type: 'column'
    },
    credits: {
      enabled:false
    },
    title: {
        text: 'Detalles'
    },

    xAxis:{
      type: "category"
    },
    yAxis: {
        min: 0,
        title: {
            text: 'Tiempo (dias)'
        }
    },
    tooltip: {
        headerFormat: '<span style="font-size:10px"></span><table>',
        pointFormat: '<tr><td style="color:{point.color};padding:0">Tiempo: </td>' +
            '<td style="padding:0"><b>{point.y} dias</b></td></tr>',
        footerFormat: '</table>',
        shared: true,
        useHTML: true
    },
    plotOptions: {
        column: {
            stacking: "normal",
            pointPadding: 0.2,
            borderWidth: 0,
            events: {
                      legendItemClick: function () {
                          return this.visible ? 'visible' : 'hidden';
                        }
                      }}}

    });

  var seriesArray = [];
<?php
$sqlEstados = mysqli_query($con,"SELECT DISTINCT (estado) as nombre_estado from proceso order by nombre_estado");
while ($rowEstados = mysqli_fetch_array($sqlEstados)){
  ?> ch.addSeries({name:"<?php echo $rowEstados['nombre_estado']?>", color: "    <?php echo $rowEstados['nombre_estado'] == "FINALIZADO" ? '#00C851' : ($rowEstados['nombre_estado'] == "WORKING" ? '#ffbb33' : (($rowEstados['nombre_estado'] == "PARADO" ? '#ff4444' :  '#33b5e5'))); ?>"});
<?php
} //INFLANDO LAS SERIES 03/07/2017 -> QUEDA INFLAR LAS CATEGORIAS CON OTRA FUNCION QUE DEVUELVA [[nombre,valor]]
 $sql = mysqli_query($con,"SELECT timestampdiff(DAY,fecha_creacion, IFNULL(fecha_cerrado,NOW())) as t_diff_dias, (SELECT MAX(timestampdiff(DAY,fecha_creacion, IFNULL(fecha_cerrado,NOW()))) from proceso where not (estado='FINALIZADO' and fecha_cerrado IS NULL) ) as max_dias, id_proceso, proceso,estado from proceso where not (estado='FINALIZADO' and fecha_cerrado IS NULL)  ORDER BY id_proceso desc");
while ($rowSQL = mysqli_fetch_array($sql))
{
  $var;
  switch ($rowSQL['estado']) {
    case 'FINALIZADO':
      $var = 1;
      break;
    case 'WORKING':
      $var = 3;
      break;
    case 'PARADO':
      $var = 2;
      break;
    default:
      $var = 0;
      break;
  }
echo "ch.series[".$var."].addPoint([\"".$rowSQL['proceso']."\",".$rowSQL['t_diff_dias']."]);";
}
?>

谢谢您的建议。

编辑:谢谢，我尝试一些不同的东西。但我感谢您的支持

Answer 1

从列中删除事件也堆叠， 它默认工作。 如果你的系列数据没问题那就没有问题

 series: [
            {
        name: 'A1',
     data: [0,2,0,58,3]
    }, 
            {
        name: 'A2',
     data: [0,22,0,42,0]
    }, 
            {
        name: 'A3',
     data: [0,2,0,11,0]
    }, 
]

x 轴有 5 个数据列和 3 个系列。 只是如果您需要检查我的图表代码，请忽略额外的代码

var q=jQuery.noConflict();
q(function () {
   q('#container3').highcharts({

chart: {
        type: 'column'
    },
    title: {
        text: 'Staff  Stats '
    },
    xAxis: {
        categories: [
            'Done',
            'New',
            'Working',
            'Pending',
            'Calls',
        ],
        crosshair: true
    },
    yAxis: {
        min: 0,
        title: {
            text: 'Stats '
        }
    },
    tooltip: {
        headerFormat: '<span style="font-size:10px">{point.key}</span><table>',
        pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' +
            '<td style="padding:0"><b>{point.y:.1f}</b></td></tr>',
        footerFormat: '</table>',
        shared: true,
        useHTML: true
    },
    plotOptions: {
        column: {
            pointPadding: 0,
            borderWidth: 0
        }
    },
    series: [
        {
         name: 'A1',
         data: [0,2,0,58,3]
        }, 
        {
         name: 'A2',
         data: [0,22,0,42,0]
        }, 
        {
         name: 'A3',
         data: [0,2,0,11,0]
        }, 
    ]
   });
});