1

Não estou conseguindo identificar o porque está aparecendo essa "sombra", o risco quando passo o mouse no gráfico, isso acontece com todos os outros que são 3D. Segue código e imagem do que está acontecendo:

function geraColunasSimples(idChart, jsonCategories, yTitle, title,  seriesName, jsonData) {

setOptionsChart();

var coluna = Highcharts.chart(idChart, {
    chart: {
        type: 'column',
        plotShadow: false,
        options3d: {
            enabled: true,
            alpha: 0,
            beta: 0,
            depth: 20
        },
        style: {
            fontFamily: 'Helvetica'
        }
    },
    xAxis: {
        categories: jsonCategories,
        crosshair: true,
    },
    yAxis: {
        min: 0,
        title: {
            text: yTitle
        }
    },
    tooltip: {
        shadow: false,
        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} </b></td></tr>',
        footerFormat: '</table>',
        shared: true,
        useHTML: true
    },
    title: {
        text: title
    },
    credits: {
        enabled: false
    },
    plotOptions: {
        states: {
            hover: {
                enabled: false
            }
        },
        column: {
            depth: 25,
            edgeWidth: 0.4,
            edgeColor: '#fff',
            cursor: 'pointer'       
        },
        series:{
            colorByPoint: true,
            allowPointSelect: true,
            point:{
                events:{
                    click: function(e) {
                        //alert(this.category + ' selecionado!');
                    }
                }
            }
        }
    },
    series: [{
        name: seriesName,
        data: jsonData
    }]
});

return coluna;
}

inserir a descrição da imagem aqui

1 Resposta 1

1

Sei que a issue foi aberta a bastante tempo, mas caso alguém esteja tendo esse problema:

Isso parece ser um problema do Highcharts em gráficos 3D com crosshair habilitado.

Havia uma issue aberta para o Highcharts porém a discussão foi encerrada por inatividade(https://github.com/highcharts/highcharts/issues/4578)

Você tem 3 opções:

  1. Desabilitar o 3D ou remover o crosshair do seu gráfico.
  2. Reabrir a issue do Highcharts e esperar a possível correção.
  3. Fazer um script para tentar esconder esse overflow do crosshair.

Eu fiz um script usando jquery para esconder esse overflow, provavelmente ele não irá funcionar para todos os gráficos mas acho que irá te ajudar a entender melhor o problema.

Obs: Como não garanto que o script irá funcionar corretamente em todos os cenários, sugiro reabrir a issue no github e desabilitar o 3D(ou o crosshair) até o problema ser resolvido.

const hideCrosshairOverflow = () => {
    const crosshair = $('#container').find('.highcharts-crosshair');
    let newD = crosshair.attr('d').split(' L');

    newD.pop();

    crosshair.attr('d', newD.join(' L'));
};

Para funcionar corretamente eu precisei colocar um timeout de 0, conforme da para ver no fiddle: https://jsfiddle.net/mkgqp6xy/1/

Explicação

Por algum motivo, na hora de renderizar o gráfico, o Highcharts está adicionando uma linha a mais no elemento SVG responsável por mostrar o crosshair.

O que meu script está fazendo é, basicamente, pegando o elemento do crosshair e removendo o código referente a essa linha extra.

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .