[Angularjs] Representación de Highcharts utilizando Directivas js angulares



Answers

Implementación alternativa aquí: http://jsfiddle.net/pablojim/Cp73s/

Esto usa https://github.com/pablojim/highcharts-ng

Esto le permite crear un Highchart con el siguiente html:

<highchart id="chart1" series="chart.series" title="chart.title" options="chart.options"></highchart>

En el caso anterior, chart.series es una matriz de objetos javascript que representa las series en el gráfico; estos toman las opciones estándar de Highcharts. Estos son luego observados por angularjs para cualquier cambio.

chart.options es las opciones de inicialización de Highcharts, también observadas en busca de cambios. Aunque los cambios en esto recrean toda la tabla.

chart.title es el objeto de título de los Highcharts, también se han observado los cambios.

Question

Soy nuevo en Angular JS e intento renderizar mis Highcharts (Basic Line) creando una directiva. Por favor dígame el enfoque que debería seguir aquí. Cualquier ayuda sería apreciada.

Aquí está mi script para los Highcharts:

<script type="text/javascript">
$(function () {
    $('#container').highcharts({
        chart: {
            type: 'line',
            marginRight: 130,
            marginBottom: 25
        },
        title: {
            text: 'Monthly Average Temperature',
            x: -20 //center
        },
        subtitle: {
            text: 'Source: WorldClimate.com',
            x: -20
        },
        xAxis: {
            categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
                'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
        },
        yAxis: {
            title: {
                text: 'Temperature (°C)'
            },
            plotLines: [{
                value: 0,
                width: 1,
                color: '#808080'
            }]
        },
        tooltip: {
            valueSuffix: '°C'
        },
        legend: {
            layout: 'vertical',
            align: 'right',
            verticalAlign: 'top',
            x: -10,
            y: 100,
            borderWidth: 0
        },
        series: [{
            name: 'Tokyo',
            data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6]
        }, {
            name: 'New York',
            data: [-0.2, 0.8, 5.7, 11.3, 17.0, 22.0, 24.8, 24.1, 20.1, 14.1, 8.6, 2.5]
        }, {
            name: 'Berlin',
            data: [-0.9, 0.6, 3.5, 8.4, 13.5, 17.0, 18.6, 17.9, 14.3, 9.0, 3.9, 1.0]
        }, {
            name: 'London',
            data: [3.9, 4.2, 5.7, 8.5, 11.9, 15.2, 17.0, 16.6, 14.2, 10.3, 6.6, 4.8]
        }]
    });
});


    </script>



Links