0

Estoy experimentando un error muy raro y es que tengo en una página 3 gráficas, de las cuales 2 gráficas se muestran correctamente con su ícono de exportar introducir la descripción de la imagen aquí respectivamente.

Sin embargo, una de las gráficas no muestra dicho ícono. Muestro el código que tengo para construirla:

HTML

<figure class="highcharts-figure">
  <div style="height:600px !important;" id="container-varios"></div>
</figure>

Javascript

Highcharts.chart('container-varios', {
  chart: {
      type: 'area'
  },
  credits: { enabled: false },
  legend:{
      verticalAlign:'top',
      align : 'left',
      useHTML: true,
  },
  accessibility: {
      description: ''
  },
  title: {
      text: ''
  },
  subtitle: {
      text: ''
  },
  xAxis: {
      categories: dataContent.rango_fechas
  },
  yAxis: {
      title: {
          text: ''
      },
      labels: {
          formatter: function () {
              return this.value + '';
          }
      }
  },

  exporting: {
      buttons: {

      }
  },

    series: [

      {
          name: 'Total cursos',
          data: [],
          events: {
              legendItemClick: function (e) {
                  e.preventDefault();
              }
          },
      },

      {
          name: 'Total views',
          marker: {
              symbol: 'url(assets/img/iconogris.png)'
          },
          data: dataContent.total_views,
          color : "#929292",
          events: {
              legendItemClick: function (e) {
                  e.preventDefault();
              }
          },
      },

      {
          name: 'Total Usuarios',
          marker: {
              symbol: 'url(assets/img/iconogrisclaro.png)'
          },
          data: dataContent.totales_suscritos_profesor,
          //data: default_values2,
          color : "#5E5E5E",
          events: {
              legendItemClick: function (e) {
                  e.preventDefault();
              }
          },

      },
      {
          name: 'Total usuarios suscritos <br> a la playlist',
          data: dataContent.total_usuarios_suscritos_playlist,
          events: {
              legendItemClick: function (e) {
                  e.preventDefault();
              }
          },
      },

      {
          name: 'Valoración media',
          data: [],
          events: {
              legendItemClick: function (e) {
                  e.preventDefault();
              }
          },
      },

      {
          name: 'Total valoraciones',
          data: [],
          events: {
              legendItemClick: function (e) {
                  e.preventDefault();
              }
          },
      },

    ]
});

Además, agregué las siguientes librerías correspondientes para exportar

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/series-label.js"></script>
<script src="https://code.highcharts.com/modules/offline-exporting.js"></script>

<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/export-data.js"></script>

Me gustaría volver a aclarar que omití la parte donde construyo dos gráficas en el mismo documento y que éstas sí se muestran correctamente con su ícono de exportar, sin embargo, como comenté antes, esta gráfica en particular no tiene el ícono respectivamente a pesar de que parece estar configurada correctamente (dejo este screenshot para que vean cómo se muestran estas tres gráficas).

introducir la descripción de la imagen aquí

1
  • A mi me paso hace poco, pero era por no estar trabajando con una versión más actual de Highcharts el 27 ene. 2022 a las 23:34

1 respuesta 1

0

He subido tu ejemplo a un server compartido para que veas el resultado, y no encuentro error en lo que estas mostrando, lo más probable es que sea un CSS (que sobre-escribe) de ese gráfico. Para mí son las leyendas que pueden estar por encima del botón pero el botón debe estar ahí. Deberías hacer un inspect del HTML y ver si el botón está o no ahí. Y luego, quitar algunas leyendas (que son 6) como 2 y ver si aún asi no se muestra. https://jsfiddle.net/670b1La3/

Saludos Cordiales

2
  • Hola. Gracias por tu respuesta. Las propiedades rango_fechas, total_views, y totales_suscritos_profesor son un array de elementos, por ejemplo el númeor de elementos de cada uno podrían ser 5 elementos, no son strings debido a que en el eje x estoy dibujando un desglose de fechas (como viene en la imagen que adjunté) Ejemplo, rango_fechas = ["01/DIC/2020","02/DIC/2020","'03/DIC/2020","04/DIC/2020","05/DIC/2020"] el 31 dic. 2020 a las 7:05
  • el problema estaba en la propiedad "color" de cada "series" de la gráfica, quitando eso ya se ve el ícono, gracias el 2 ene. 2021 a las 2:36

Tu Respuesta

Al pulsar en “Publica tu respuesta”, muestras tu consentimiento a nuestros términos de servicio, política de privacidad y política de cookies

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.