$(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', } } ] }) });