1

Estoy intentando crear un gráfico que combine el gráfico 'bubble' y 'line' de higcharts, pero no llega a dibujarse.

                Highcharts.chart('container', {
                    chart: {
                        zoomType: 'xy',
                        plotBorderWidth: 1,
                    },
                    yAxis: [{
                        title: {
                            text: 'Temperature'
                        }
                    }, {
                        title: {
                            text: 'Rainfall'
                        },
                        opposite: true
                    }],
                
                    series: [{
                        type: 'line',
                        data: [[1, 29.9], [2, 71.5], [3, 106.4], [5, 129.2]],
                        name: 'Temperature'
                    }, {
                        type: 'bubble',
                        data: [[1, 81, 63],
                            [2, 5, 89],
                            [3, 50, 73]],
                        name: 'Rainfall'
                    }]
                });
   <!DOCTYPE html>
<html>
    <head>
        <title>Page Title</title>
        <script src="https://code.highcharts.com/highcharts.js"></script>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
      </head>
    <body>
            <div id="container"></div>
    </body>
</html>

No sé que es lo que estoy haciendo mal o si es que no es posible. Muchas gracias

2 respuestas 2

0

                Highcharts.chart('container', {
                    chart: {
                        zoomType: 'xy',
                        plotBorderWidth: 1,
                    },
                    yAxis: [{
                        title: {
                            text: 'Temperature'
                        }
                    }, {
                        title: {
                            text: 'Rainfall'
                        },
                        opposite: true
                    }],
                
                    series: [{
                        type: 'line',
                        data: [[1, 29.9], [2, 71.5], [3, 106.4], [5, 129.2]],
                        name: 'Temperature'
                    }],
                drilldown: {
                    name: 'Temperature',
                    id: 'Temperature',
                        type: 'bubble',
                        data: [[1, 81, 63],
                            [2, 5, 89],
                            [3, 50, 73]],
                        name: 'Rainfall'
                    }
                });

Puedes hacer uso del drilldown y definir en tu primer nivel que seria la linea y luego en el segundo nivel defines las n tipos de gráficos que quieras mostrar. Si lograr hacer lo funcionar me dices, yo igual estoy atascado para mostrar la serie del segundo nivel.

0

Al final conseguí combinarlo. Mira este ejemplo a ver si te sirve http://jsfiddle.net/47a0wL5h/

Te recomiendo utilizar el foro de Highcharts(https://forum.highcharts.com/), tiene muchos ejemplos y soluciones a problemas que me he ido encontrado.

Saludos

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

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