zoukankan      html  css  js  c++  java
  • highcharts中放aqi及6要素,再加上气象5要素的图

    var chart = Highcharts.chart('container', {
        chart: {
            zoomType: 'xy'
        },
        title: {
            text: '东京月平均天气数据'
        },
        subtitle: {
            text: '数据来源: WorldClimate.com'
        },
        xAxis: [{
            categories: [
                '一月', '二月', '三月', '四月', '五月', '六月','七月', '八月', '九月', '十月', '十一月', '十二月'
            ],
            crosshair: true,
            offset: 40
        }],
        yAxis: [{ // Primary yAxis
            labels: {
                format: '{value}°C',
                style: {
                    color: Highcharts.getOptions().colors[2]
                }
            },
            title: {
                text: '温度',
                style: {
                    color: Highcharts.getOptions().colors[2]
                }
            },
            opposite: true
        }, { // Secondary yAxis
            gridLineWidth: 0,
            title: {
                text: '降雨量',
                style: {
                    color: Highcharts.getOptions().colors[0]
                }
            },
            labels: {
                format: '{value} mm',
                style: {
                    color: Highcharts.getOptions().colors[0]
                }
            },
            opposite: true
        }, { // Tertiary yAxis
            gridLineWidth: 0,
            title: {
                text: '海平面气压',
                style: {
                    color: Highcharts.getOptions().colors[1]
                }
            },
            labels: {
                format: '{value} mb',
                style: {
                    color: Highcharts.getOptions().colors[1]
                }
            },
            opposite: true
        }, {
            title: {
                text: '污染物浓度 (mm)'
            }
        }],
        tooltip: {
            shared: true
        },
        series: [{
            name: '降雨量',
            type: 'spline',
            yAxis: 1,
            data: [49.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4],
            tooltip: {
                valueSuffix: ' mm'
            }
        }, {
            name: '海平面气压',
            type: 'spline',
            yAxis: 2,
            data: [1016, 1016, 1015.9, 1015.5, 1012.3, 1009.5, 1009.6, 1010.2, 1013.1, 1016.9, 1018.2, 1016.7],
            marker: {
                enabled: false
            },
            dashStyle: 'shortdot',
            tooltip: {
                valueSuffix: ' mb'
            }
        }, {
            name: '温度',
            type: 'spline',
            Axis: 3,
            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],
            tooltip: {
                valueSuffix: ' °C'
            }
        },{
            name: '东京',
            Axis: 4,
            type: 'column',
            data: [49.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
        }, {
            name: '纽约',
            Axis: 4,
            type: 'column',
            data: [83.6, 78.8, 98.5, 93.4, 106.0, 84.5, 105.0, 104.3, 91.2, 83.5, 106.6, 92.3]
        }, {
            name: '伦敦',
            Axis: 4,
            type: 'column',
            data: [48.9, 38.8, 39.3, 41.4, 47.0, 48.3, 59.0, 59.6, 52.4, 65.2, 59.3, 51.2]
        }, {
            name: '柏林',
            Axis: 4,
            type: 'column',
            data: [42.4, 33.2, 34.5, 39.7, 52.6, 75.5, 57.4, 60.4, 47.6, 39.1, 46.8, 51.1]
        }, {
            name: 'aa',
            Axis: 4,
            type: 'column',
            data: [42.4, 33.2, 34.5, 39.7, 52.6, 75.5, 57.4, 60.4, 47.6, 39.1, 46.8, 51.1]
        },{
            name: 'bb',
            Axis: 4,
            type: 'column',
            data: [42.4, 33.2, 34.5, 39.7, 52.6, 75.5, 57.4, 60.4, 47.6, 39.1, 46.8, 51.1]
        },{
            name: 'cc',
            Axis: 4,
            type: 'column',
            data: [42.4, 33.2, 34.5, 39.7, 52.6, 75.5, 57.4, 60.4, 47.6, 39.1, 46.8, 51.1]
        },{
            type: 'windbarb',
            data: [
                [9.8, 177.9],
                [10.1, 177.2],
                [11.3, 179.7],
                [10.9, 175.5],
                [9.3, 159.9],
                [8.8, 159.6],
                [7.8, 162.6],
                [5.6, 186.2],
                [6.8, 146.0],
                [6.4, 139.9],
                [3.1, 180.2],
                [4.3, 177.6]
            ],
            name: 'Wind',
            color: Highcharts.getOptions().colors[1],
            showInLegend: true,
            tooltip: {
                valueSuffix: ' m/s'
            }
        }]
    });

    引入js

    highcharts.js
    exporting.js
    windbarb.js
    highcharts-zh_CN.js
  • 相关阅读:
    java.lang.OutOfMemoryError: GC overhead limit exceeded
    Ural 1146 Maximum Sum(DP)
    [算法系列之四]优先级队列
    Python源代码--整数对象(PyIntObject)的内存池
    3星|何帆《猜测与偏见》:社科书评集
    4星|《认识经济》:全面系统的经济学普及读物,鸿篇巨制,价格超贵
    3星|《东方启动点》:民营企业家们的故事,故事多分析概括少
    2星|《大师的管理课》:畅销书作家们的35篇励志散文
    3.5星|《蓝海战略2》:实施蓝海战略的具体工具与方法。案例牵强且偏老旧
    2星|《读懂华为30年》:基于公开资料的整理和肤浅的发挥
  • 原文地址:https://www.cnblogs.com/wangyang108/p/10311198.html
Copyright © 2011-2022 走看看