2

Estou tentando fazer um efeito de, quando escolho uma opção no select, mostro a div correspodente com highchart. Tem 2 problemas:

1- A largura do chart não está completando corretamente a largura da div.

2- Não estou conseguindo pensar em um jeito de esconder as outras opções quando uma for mostrada. (serão mais de 3 opções, no exemplo tem duas para não complicar muito).

JSFIDDLE

HTML

<div style="width:80%;">
<select class="selectchart" id="selectsolicitacoes"><option>Por mês</option><option value="#hg3">Por semana</option><option value="#hg2">Por dia</option></select><br>
<div id="hg2" style="min-width: 310px; height: 400px; margin: 0 auto; display: none;">        </div>
<div id="hg3" style="min-width: 310px; height: 400px; margin: 0 auto; display: none;">     </div>

Javascript

$(document).ready(function(){
$('#selectsolicitacoes').change(function(){
    var element = $(this).val();
    $(element).show();
});
});
2
  • Igor, é isto que procura? jsfiddle.net/6S9cZ/1
    – Sergio
    Commented 26/04/2014 às 13:40
  • 1
    Olá.Obrigado. Resolveu o segundo problema, o primeiro ainda não. O chart não está aparecendo ocupando toda a div só metade dela Commented 26/04/2014 às 13:44

1 Resposta 1

1

Aqui fica uma sugestão:

Mostrar e esconder opções:

$(document).ready(function(){
    var $graficos = $('[id^=hg]').hide();
    $('#selectsolicitacoes').change(function(){
        var element = this.value; // tirei o "$(this).val()", não precisa de jQuery aqui
        $graficos.hide(); // esconder todos os elementos que cujo ID começa por "hg"
        $(element).show();
    });
});

Eu sugiro dar um ID mais longo para não correr o risco de o meu código "apanhar" outros elementos no mesmo seletor. Talvez seja mesmo boa ideia usar uma div à volta desses gráficos para ter um seletor mais "certeiro", tipo $('#novaDiv [id^=hg]').hide();

Largura do Highchart

O problema parece ser o Highcharts não conseguir saber a largura de um elemento que está escondido. Isto é um bug conhecido do Highcharts.

Assim, se no CSS inicial os elementos não estiverem com display: none;mas sim com opacity: 0; o Highcharts consegue renderizar com a largura correta. A partir daí pode usar o código como eu tinha colocado.

Juntando a esta ideia o uso do evento onLoad do Hicharts, pode usar assim:

$('#hg2').highcharts({
    chart: {
        events: {
            load: function (event) {
                $('#hg2').hide().css('opacity', 1);
            }
        }
    },
// fazer isto em cada gráfico

Exemplo

Esta solução é baseada nesta resposta, as maneiras que conhecia de antes, que são remendos para o "bug" são atribuir width: 100%; à div do Hicharts, ou chamar um $(window).resize();

4
  • Sergio, eu já havia tentado o width: 100% mas se você reparar, o elemento superior tem width:80% e quando colocamos 100% o chart ultrapassa o elemento acima. Commented 26/04/2014 às 13:59
  • @IgorMartins como disse é um bug conhecido do Highcharts, vou dar uma olhada pela web de novo. A outra solucão que referí é esta: jsfiddle.net/6S9cZ/4
    – Sergio
    Commented 26/04/2014 às 14:11
  • @IgorMartins, completei a resposta com informação "fresca".
    – Sergio
    Commented 26/04/2014 às 14:32
  • 1
    show!!! muito obrigado pela paciência. Commented 26/04/2014 às 15:00

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 .