Hacer que los gráficos de Highcharts.js se vean bien en dispositivos móviles y de escritorio

Me pregunto si alguien ha implementado con éxito un diseño receptivo con Highcharts para hacer que sus gráficos se vean bien en dispositivos móviles y de escritorio.Hacer que los gráficos de Highcharts.js se vean bien en dispositivos móviles y de escritorio

De forma predeterminada, los Highcharts cambian de escala cuando cambia el tamaño de la pantalla del navegador simplemente porque el eje X se llena de texto y los gráficos de barras se ven altos y demasiado delgados (demasiado comprimidos). Para tener una idea de lo que quiero decir, puede ir al this page y cambiar el tamaño del navegador.

Creo que estos problemas podrían abordarse reduciendo la cantidad de puntos de datos, por ejemplo, a 1/3 del número original, aunque me pregunto cómo se lograría mediante programación utilizando la API de Highcharts. Si eso no suena como una buena idea, también me interesan otras ideas o soluciones que la gente podría haber utilizado para usar Highcharts en dispositivos móviles (o incluso diferentes bibliotecas de gráficos JS donde una solución de varios dispositivos podría ser más fácil de implementar ?).

Fuente

2012-07-12 tim peterson

http://angulartutorial.blogspot.in/2014/03/responsive-highchart.html – Prashobh

Consulte este y ver si ayuda - http://jsfiddle.net/Behseini/qheh4w0n/ –

La solución parece bastante simple.

Simplemente no le dé al gráfico un ancho fijo, es decir, no defina el ancho width:100% y, a diferencia de la demostración que menciono, el ancho del gráfico de barras y las barras que lo acompañan se reducirán tanto como el ancho del navegador reducido.

Fuente

2013-02-03 16:43:41

¿por qué esta respuesta fue downvoted? –

Probablemente dependa de qué tipos de gráficos está visualizando. En el móvil, si está mostrando un gráfico de columnas, es posible que desee rotar el gráfico para que se convierta en un gráfico de barras.

Si está visualizando un gráfico de líneas, podría "examinar" los datos, de modo que solo muestre la menor cantidad de puntos necesarios para transmitir el punto. Al acercarse, vuelva a examinar los datos para que se ajusten a la vista actual. Esto se puede hacer usando algunos eventos combinados con algunos js enrollados a mano.

Fuente

2012-07-12 19:39:49

Se no es probable que sea una solución única para todos, de hecho es el punto. Tendrás que decirle a la computadora lo que quieres que haga @TimPeterson y no dejar que adivine por ti. – jcolebrand

un ejemplo con bootstrap

<!DOCTYPE html> 
<html lang="en" xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
    <meta charset="utf-8" /> 
    <title>Highcharts data from JSON Response</title> 
     <style> 
     body{ 
      margin-top: 30px; 
      margin-left:40px; 
     } 
     .col-md-4{ 
     padding-left:5px !important; 
     padding-right:5px !important; 
     } 
     </style> 
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
    <script src="http://code.highcharts.com/highcharts.js"></script>  
<script src="https://code.highcharts.com/modules/exporting.js"></script> 
    <script type="text/javascript"> 
     // Data gathered from http://populationpyramid.net/germany/2015/ 

// Age categories 
var categories = ['0-4', '5-9', '10-14', '15-19', 
     '20-24', '25-29', '30-34', '35-39', '40-44', 
     '45-49', '50-54', '55-59', '60-64', '65-69', 
     '70-74', '75-79', '80-84', '85-89', '90-94', 
     '95-99', '100 + ']; 
$(document).ready(function() { 
    Highcharts.chart('container', { 
     chart: { 
      type: 'bar' 
     }, 

     xAxis: [{ 
      categories: categories, 
      reversed: false, 
      labels: { 
       step: 1 
      } 
     }, { // mirror axis on right side 
      opposite: true, 
      reversed: false, 
      categories: categories, 
      linkedTo: 0, 
      labels: { 
       step: 1 
      } 
     }], 
     yAxis: { 
      title: { 
       text: null 
      }, 
      labels: { 
       formatter: function() { 
        return Math.abs(this.value) + '%'; 
       } 
      } 
     }, 

     plotOptions: { 
      series: { 
       stacking: 'normal' 
      } 
     }, 

     tooltip: { 
      formatter: function() { 
       return '<b>' + this.series.name + ', age ' + this.point.category + '</b><br/>' + 
        'Population: ' + Highcharts.numberFormat(Math.abs(this.point.y), 0); 
      } 
     }, 

     series: [{ 
      name: 'Male', 
      data: [-2.2, -2.2, -2.3, -2.5, -2.7, -3.1, -3.2, 
       -3.0, -3.2, -4.3, -4.4, -3.6, -3.1, -2.4, 
       -2.5, -2.3, -1.2, -0.6, -0.2, -0.0, -0.0] 
     }, { 
      name: 'Female', 
      data: [2.1, 2.0, 2.2, 2.4, 2.6, 3.0, 3.1, 2.9, 
       3.1, 4.1, 4.3, 3.6, 3.4, 2.6, 2.9, 2.9, 
       1.8, 1.2, 0.6, 0.1, 0.0] 
     }] 
    }); 
    Highcharts.chart('container2', { 
     chart: { 
      type: 'bar' 
     }, 
     title: { 
      text: 'Population pyramid for Germany, 2015' 
     }, 
     subtitle: { 
      text: 'Source: <a href="http://populationpyramid.net/germany/2015/">Population Pyramids of the World from 1950 to 2100</a>' 
     }, 
     xAxis: [{ 
      categories: categories, 
      reversed: false, 
      labels: { 
       step: 1 
      } 
     }, { // mirror axis on right side 
      opposite: true, 
      reversed: false, 
      categories: categories, 
      linkedTo: 0, 
      labels: { 
       step: 1 
      } 
     }], 
     yAxis: { 
      title: { 
       text: null 
      }, 
      labels: { 
       formatter: function() { 
        return Math.abs(this.value) + '%'; 
       } 
      } 
     }, 

     plotOptions: { 
      series: { 
       stacking: 'normal' 
      } 
     }, 

     tooltip: { 
      formatter: function() { 
       return '<b>' + this.series.name + ', age ' + this.point.category + '</b><br/>' + 
        'Population: ' + Highcharts.numberFormat(Math.abs(this.point.y), 0); 
      } 
     }, 

     series: [{ 
      name: 'Male', 
      data: [-2.2, -2.2, -2.3, -2.5, -2.7, -3.1, -3.2, 
       -3.0, -3.2, -4.3, -4.4, -3.6, -3.1, -2.4, 
       -2.5, -2.3, -1.2, -0.6, -0.2, -0.0, -0.0] 
     }, { 
      name: 'Female', 
      data: [2.1, 2.0, 2.2, 2.4, 2.6, 3.0, 3.1, 2.9, 
       3.1, 4.1, 4.3, 3.6, 3.4, 2.6, 2.9, 2.9, 
       1.8, 1.2, 0.6, 0.1, 0.0] 
     }] 
    }); 
    Highcharts.chart('container3', { 
     chart: { 
      type: 'bar' 
     }, 
     title: { 
      text: 'Population pyramid for Germany, 2015' 
     }, 
     subtitle: { 
      text: 'Source: <a href="http://populationpyramid.net/germany/2015/">Population Pyramids of the World from 1950 to 2100</a>' 
     }, 
     xAxis: [{ 
      categories: categories, 
      reversed: false, 
      labels: { 
       step: 1 
      } 
     }, { // mirror axis on right side 
      opposite: true, 
      reversed: false, 
      categories: categories, 
      linkedTo: 0, 
      labels: { 
       step: 1 
      } 
     }], 
     yAxis: { 
      title: { 
       text: null 
      }, 
      labels: { 
       formatter: function() { 
        return Math.abs(this.value) + '%'; 
       } 
      } 
     }, 

     plotOptions: { 
      series: { 
       stacking: 'normal' 
      } 
     }, 

     tooltip: { 
      formatter: function() { 
       return '<b>' + this.series.name + ', age ' + this.point.category + '</b><br/>' + 
        'Population: ' + Highcharts.numberFormat(Math.abs(this.point.y), 0); 
      } 
     }, 

     series: [{ 
      name: 'Male', 
      data: [-2.2, -2.2, -2.3, -2.5, -2.7, -3.1, -3.2, 
       -3.0, -3.2, -4.3, -4.4, -3.6, -3.1, -2.4, 
       -2.5, -2.3, -1.2, -0.6, -0.2, -0.0, -0.0] 
     }, { 
      name: 'Female', 
      data: [2.1, 2.0, 2.2, 2.4, 2.6, 3.0, 3.1, 2.9, 
       3.1, 4.1, 4.3, 3.6, 3.4, 2.6, 2.9, 2.9, 
       1.8, 1.2, 0.6, 0.1, 0.0] 
     }] 
    }); 
}) 

    </script> 
</head> 
<body> 
<div class="col-md-12 row"> 
<div class="col-md-4"> 
hello 
</div> 
    <div class="col-md-8 row"> 
    <div class="col-md-4"><div id="container" style="height: 400px;border:1px solid;"></div></div> <div class="col-md-4"><div id="container2" style="height: 400px;border:1px solid;"></div></div> 
    <div class="col-md-4"><div id="container3" style="height: 400px;border:1px solid;"></div></div> 
    </div> 
    </div> 


</body> 
</html>

Fuente

2017-09-11 17:58:59 ankush

Es posible ajustar la tabla de contenedor div width:100%. A continuación, simplemente elimine la propiedad de ancho de tabla alta. Lo resolví para un gráfico de chispa. Ahora es receptivo para dispositivos móviles.

Highcharts.chart('my-sparkline-chart, { 
     chart: { 
      type: 'areaspline', 
      height: '70', 
      //width: '189', //comment width property. 
      spacing: [0, 0, 0, 0], 
      backgroundColor: "transparent" 
     } 
...

Fuente

2017-10-09 07:36:21 Asaprab

Hacer que los gráficos de Highcharts.js se vean bien en dispositivos móviles y de escritorio

Respuesta

Cuestiones relacionadas