Hightchartjs小经验

最新推荐文章于 2021-02-09 17:37:52 发布

kx_note

最新推荐文章于 2021-02-09 17:37:52 发布

阅读量707

点赞数

本文链接：https://blog.csdn.net/u012815721/article/details/21100341

版权

---Demo1

<script type="text/javascript">
$(function() {
//获取数据开始
var timeData = [], eleData = [];
//设置ajax异步加载
$.ajaxSetup({async: false});
$.getJSON("yearajax.jsp?lfid=<%=id%>&time1=<%=time1%>&time2=<%=time2%>&t=" + new Date(),
function(data) {
for (var i = 0; i < data.length; i++)
{
timeData.push(data[i].datatime);
eleData.push(data[i].electricadd);
//ss+=data[i].price+",";
}

}
);
//获取数据结束
$("#container").height($(window).height());//给图像设置高度（自动获取屏幕高度）
$('#container').highcharts({
chart: {
type: 'column',
margin: [50, 50, 100, 80]
},
title: {
text: '年发电图示'
},
xAxis: {
categories: timeData, //x轴下的内容

labels: {
rotation: 0, //控制x轴下字体的倾斜度
align: 'center',
style: {
fontSize: '13px', //柱状图上的数据字体大小
fontFamily: 'Verdana, sans-serif'
}
}
},
yAxis: {
min: 0,
title: {
text: ''
}
},
legend: {
enabled: false
},
tooltip: {
pointFormat: 'Population in 2008: <b>{point.y:.1f} millions</b>', //鼠标放上的提示信息
},
series: [{
name: 'Population',
data: eleData, //数据源
dataLabels: {
enabled: true, //是否显示柱状图上的标示数字
rotation: 0, //控制示柱状图上的标示数字字体的倾斜度
color: '#000',
align: 'center', //控制示柱状图上的标示数字字体位置
x: 4,
y: 10,
style: {
fontSize: '18px',
fontFamily: 'Verdana, sans-serif',
textShadow: '0 0 3px black'
}
}
}]
});
});
</script>
</head>
<body>
<!--柱状图div-->
<div id="container" style="margin: 0 auto"></div>




-----Demo2

//生成当日发电情况曲线图-----开始
            $.ajaxSettings.async = false;
            var getDayReport = function() {
                var irrData = [], shijiData = [], rundata = [];
                $.getJSON("dayajax.jsp?lfid=<%=lfidStr%>&time1=<%=daytime1%>&time2=<%=daytime2%>&r=<%=runc%>&t=" + new Date(),
                        function(data) {
                            if (data.length < 24) {
                                alert("此日期的数据存在问题！请选择其他日期！");
                            } else {
                                var temp = [];
                                $.each(data, function(i) {
                                    temp.push(data[i].datatime * 1000);
                                    temp.push(data[i].irradiance);
                                    irrData.push(temp);
                                    temp = [];
                                    temp.push(data[i].datatime * 1000);
                                    temp.push(data[i].power);
                                    shijiData.push(temp);
                                    temp = [];
                                    temp.push(data[i].datatime * 1000);
                                    temp.push(data[i].p);
                                    rundata.push(temp);
                                })
                                var options = {
                                    chart: {
                                        renderTo: 'dayContainer',
                                        defaultSeriesType: 'spline',
                                        marginRight: 20,
                                        marginLeft: 30,
                                        marginBottom: 40//x轴下的距离
                                    },
                                    //主标题
                                    title: {
                                        text: '发电功率', //主标题
                                        x: -20 //center
                                    },
                                    subtitle: {
                                        text: '--光为新能源', //副标题
                                        x: -20
                                    },
                                    credits: {
                                        enabled: false     //去掉highcharts网站url  
                                    },
                                    exporting: {
                                        enabled: false //用来设置是否显示‘打印’,'导出'等功能按钮，不设置时默认为显示 
                                    },
                                    xAxis: {
                                        type: "datetime",
                                        dateTimeLabelFormats: {
                                            day: '%b%e日'
                                        },
                                        gridLineWidth: 1,
                                        gridLineDashStyle: 'longdash',
                                        lineColor: '#c0d0e0',
                                        lineWidth: 2
                                    },
                                    yAxis: {
                                        title: {
                                            text: ' '
                                        },
                                        lineColor: '#c0d0e0',
                                        lineWidth: 2,
                                        plotLines: [{
                                                value: 0,
                                                width: 0,
                                                color: '#808080'
                                            }]
                                    },
                                    legend: {
                                        layout: 'vertical',
                                        align: 'right',
                                        verticalAlign: 'middle',
                                        borderWidth: 0
                                    },
                                    series: [{
                                            "name": "辐照度(KVA)",
                                            "data": irrData,
                                            marker: {
                                                enabled: false
                                            }
                                        }, {
                                            "name": "理论发电功率(kW)",
                                            "data": rundata,
                                            marker: {
                                                enabled: false
                                            }
                                        }, {
                                            "name": "实际发电功率(kW)",
                                            "data": shijiData,
                                            marker: {
                                                enabled: false
                                            }
                                        }]
                                };
                                new Highcharts.Chart(options);
                            }
                        }
                );
            };
            //生成当日发电情况曲线图-----结束





传对数据源后就可以动态的使用ajax加载出来数据图像