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
  • 相关阅读:
    ARC和MRC兼容和转换
    ARC下的内存管理
    嵌入式硬件系列一:处理器介绍
    嵌入式Linux GCC常用命令
    一. Linux 下的常用命令
    ARM学习中的必知基本常识
    二叉搜索树详解
    从入门到高手,嵌入式必会技能及学习步骤总结
    史上最全Linux目录结构说明
    排序系列之六:快速排序法进阶
  • 原文地址:https://www.cnblogs.com/wangyang108/p/10311198.html
Copyright © 2011-2022 走看看