夜微凉、的博客

  博客园  :: 首页  :: 新随笔  :: 联系 :: 订阅 订阅  :: 管理
$(function () {
    $('#container').highcharts({
        chart: {
            type: 'area'
        },
        xAxis: {
            categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
        },
        //主要是通过 plotOptions 来设置区域显示
        plotOptions: { 
            area:{ 
                color:'#0055cc'
            },
            //设置区域的透明度 fillOpacity: num 最大为1
            series: {
                fillOpacity: 0.3
            }
        },

        series: [{
            data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4], 
        }]
    });
}); 

//项目实例
$(function () {
     Highcharts.setOptions({
                        colors: ['#CCCCCC', '#1ab394']
                    });
                    $('#container').highcharts({
                        credits: {
                            enabled: false // 禁用版权信息
                        },
                        chart: {
                               renderTo: 'chart'
                        },
                        title: { text:'赛轮光伏电站发电量监控图'},xAxis: { categories:['2016-04-06','2016-04-01','2016-04-02','2016-04-03','2016-04-04','2016-04-05']},
                        yAxis: { 
                            title: {
                                text: 'kWh'
                            }
                        },
                        legend: { //【图例】位置样式 
                                backgroundColor: '#FFFFFF',
                                borderColor: '#CCC',
                                borderWidth: 1, 
                                shadow: true
                            },
                        plotOptions: { 
                            area: { 
                  //设置图表透明度为 0.2 fillOpacity:
0.2,
                  //设置线段的宽度为 0 lineWidth:
0, marker: { enabled: false, states: { hover: { enabled: true, radius: 5 } } }, shadow: false, states: { hover: { lineWidth: 1 } }, threshold: null }, scatter: { marker: { symbol: 'triangle-down' } } },series: [ { name: '发电量90%-115%', data: [16497,16285,10273,8481,15752,15562], type: 'area', color: 'rgba(0,148,48,1)', tooltip: { headerFormat: '<b>{series.name}</b><br>', pointFormat: '{point.y} kWh', } }, { name: '发电量70%-90%', data: [12910.63,12744.5,8039.63,6637.14,12327.33,12178.66], type: 'area', color: 'rgba(230,193,78,1)', tooltip: { headerFormat: '<b>{series.name}</b><br>', pointFormat: '{point.y} kWh', } }, { name: '发电量0%-70%', data: [10041.6,9912.39,6253.05,5162.22,9587.92,9472.29,], type: 'area', color: 'rgba(211,2,5,1)', tooltip: { headerFormat: '<b>{series.name}</b><br>', pointFormat: '{point.y} kWh', } }, { name: '模拟发电量', data: [22069.46,21785.46,13742.96,11345.54,21072.36,20818.23],marker: {symbol:'triangle-down'}, type: 'scatter', color: '#d57e1f', tooltip: { headerFormat: '<b>{series.name}</b><br>', pointFormat: '{point.y} kWh', } }, { name: '发电量', data:[{color:'rgba(236,27,30,1)','y':5555},{color:'rgba(236,27,30,1)','y':9373.7},{color:'rgba(236,27,30,1)','y':4161.79},{color:'rgba(236,27,30,1)','y':4138.98},{color:'rgba(236,27,30,1)','y':8364.81},{color:'rgba(236,27,30,1)','y':8217.1}], type: 'column', showInLegend: false, tooltip: { headerFormat: '<b>{series.name}</b><br>', pointFormat: '{point.y} kWh', } } ] }) });

 

 

 

posted on 2016-04-06 15:56  夜、微凉  阅读(3051)  评论(0编辑  收藏  举报