biểu đồ nhiệt độ lượng mưa highstock

by Hoang_Van_Trinh

HTML

<script src="https://code.highcharts.com/stock/highstock.js"></script>
<script src="https://code.highcharts.com/stock/modules/exporting.js"></script>

<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>

JavaScript

$(function () {
    $('#container').highcharts({
    		rangeSelector: {
                selected: 1
        },
        title: {
            text: 'Biểu đồ thể hiện nhiệt độ và lượng mưa theo từng tháng của Hà Nội và TP.HCM',
            align: 'left',
            margin: 60,
            x: 20
        },
        plotOptions: {
            series: {
                pointPadding: 0, // Defaults to 0.1
                groupPadding: 0.2 // Defaults to 0.2
            }
        },
        scrollbar: {
                barBackgroundColor: 'gray',
                barBorderRadius: 7,
                barBorderWidth: 0,
                buttonBackgroundColor: 'gray',
                buttonBorderWidth: 0,
                buttonBorderRadius: 7,
                trackBackgroundColor: 'none',
                trackBorderWidth: 1,
                trackBorderRadius: 8,
                trackBorderColor: '#CCC',
                enabled: true
        },
        xAxis: {
            categories: [ '01-2015','02-2015', '03-2015','04-2015', '05-2015','06-2015', '07-2015','08-2015', '09-2015','10-2015', '11-2015','12-2015', '01-2016','02-2016', '03-2016','04-2016', '05-2016','06-2016', '07-2016','08-2016'],
            min: 0,
            max: 8
        },
        yAxis: [{ // Primary yAxis
            labels: {
                format: '{value}',
                style: {
                    color: Highcharts.getOptions().colors[1]
                }
            },
            title: {
                text: 'Lượng mưa',
                style: {
                    color: Highcharts.getOptions().colors[1]
                }
            }
        }, { // Secondary yAxis
            title: {
                text: 'Nhiệt độ',
                style: {
                    color: Highcharts.getOptions().colors['red']
                }
            },
            labels: {
                format: '{value}',
                style: {
                    color: Highcharts.getOptions().colors['red']
       ...