HightCharts使用随笔

使用过HightChart，这里做个总结，方便取用。

js部分：
<script type="text/javascript">
function findchart(){
        var starttime=$('#starttime').datebox('getValue');
        var endtime=$('#endtime').datebox('getValue');
        if(starttime=="" || starttime==null){
            setMessage("请输入统计开始时间!");
            return;
        }else if(endtime=="" || endtime==null){
            setMessage("请输入统计结束时间!");
            return;
        }
        //运行时间指标 图标
        $.post('serviceMonitorAction!createServiceRunttChart.action',{
            type: $('#serviceType').combobox('getValue'),
            starttime: $('#starttime').datebox('getValue'),
            endtime: $('#endtime').datebox('getValue'),
            id: $('#serviceId').val(),
            name: $('#serviceName').val()
        },function(data){
            if(data.messageCode=="empty"){
                setMessage("运行时间指标监控报表查询数据为空,无法显示报表!");
                return;
            }else if(data.message=="false"){
                setMessage("运行时间指标监控报表查询失败!");
                return;
            }else{
                var datalist=[];//柱状Y轴轴
                var columnList=[];//X轴轴
                var splinemin=[];//最小值折现值
                var splinemax=[];//最大值折现
                for(var i=0;i<data.list.length;i++){
                        columnList.push(data.list[i].name);
                        datalist.push(parseFloat(parseNumberThree(data.list[i].avgruntime/1000)));
                        splinemin.push(parseFloat(parseNumberThree(data.list[i].runtimetargetmin/1000)));
                        splinemax.push(parseFloat(parseNumberThree(data.list[i].runtimetargetmax/1000)));
                }
                $(function () {
                    $('#runtime').highcharts({
                        chart: {
                            zoomType: 'xy',//图表是有X-Y双轴
//                          backgroundColor : {
//                          linearGradient : [ 0, 0,
//                          500, 500 ],
//                          stops : [[ 0,'rgb(250, 250, 250)' ],[ 1,'rgb(61, 139, 221)' ] ]
//                          },
//                          borderColor : '#EBBA95',
//                          borderRadius : 20,
//                          borderWidth : 2,
//                          className : 'dark-container',
//                          plotBackgroundColor : 'rgba(250, 250, 250, .1)',
//                          plotBorderColor : '#339933C',
//                          plotBorderWidth : 1,
                            events:{
                                load:function(){
                                    //document.getElementById("runtime").style.display="block";
                                }
                            }
                        },
                        title: {//图表标题
                            text: '服务运行时间监控图'
                        },
                        credits: {//开发者的链接
                            enabled: false
                        },
                        xAxis: [{//横轴数据填充
                            categories: columnList,
                            crosshair: true//是否显示(类似数据表格的行，鼠标悬空效果)鼠标悬空某列，背景色改变效果
                        }],
                        yAxis: [{ // Primary yAxis：纵轴数据填充
                            labels: {//刻度标签的数据
                                format: '{value}s',
                                style: {
                                    color: Highcharts.getOptions().colors[1]//样式
                                }
                            },
                            title: {//使用刻度的变量
                                text: '平均值',//
                                style: {
                                    color: Highcharts.getOptions().colors[1]
                                }
                            }
                        }
                        , { // Secondary yAxis
                            title: {
                                text: '指标值',
                                style: {
                                    color: Highcharts.getOptions().colors[1]
                                }
                            },
                            labels: {
                                format: '{value} s',
                                style: {
                                    color: Highcharts.getOptions().colors[1]
                                }
                            },
                            opposite: true //是否双向是否在正常显示的对立面显示轴。正常是垂直坐标轴显示在左边，水平坐标//轴显示在底部，因此对立面就是垂直坐标轴显示在右边和水平坐标轴显示在顶部，这通常用于有两个//或多个坐标轴。
                        }],
                        tooltip: {
                            shared: true  //
                        },
                        legend: { //图例（类似地图的比例尺）
                            layout: 'vertical',
                            align: 'left',
                            x: 100,
                            verticalAlign: 'top',
                            y: 50,
                            floating: true,
                            backgroundColor: (Highcharts.theme && Highcharts.theme.legendBackgroundColor) || '#FFFFFF'
                        },
                        series: [{//变量数据（集）
                            name: '平均值',
                            type: 'column',//图表类型为：柱状图
                            yAxis: 1,
                            data: datalist,
//                          colorByPoint : true,
                            tooltip: {
                                valueSuffix: ' s'
                            }

                        }, {
                            name: '指标最大值',
                            type: 'spline', //图表类型为：折线图
                            data: splinemax,
                            tooltip: {
                                valueSuffix: 's'
                            }
                        }, {
                            name: '指标最小值',
                            type: 'spline',
                            data: splinemin, //图表类型为：折线图
                            tooltip: {
                                valueSuffix: 's'
                            }
                        }]
                    });
                });
            }
        });//请求结束
        //数据量图表
        $.post('serviceMonitorAction!createServiceDataSizeChart.action',{
            type: $('#serviceType').combobox('getValue'),
            starttime: $('#starttime').datebox('getValue'),
            endtime: $('#endtime').datebox('getValue'),
            id: $('#serviceId').val(),
            name: $('#serviceName').val()
        },function(data){
            if(data.messageCode=="empty"){
                setMessage("数据量指标监控报表查询数据为空,无法显示报表!");
                return;
            }else if(data.message=="false"){
                setMessage("数据量指标监控报表查询失败!");
                return;
            }else{
                var datalist=[];//柱状Y轴
                var columnList=[];//X轴
                var splinemin=[];//最小值折现
                var splinemax=[];//最大值折现
                for(var i=0;i<data.list.length;i++){
                        columnList.push(data.list[i].name);
                        datalist.push(parseFloat(parseNumberThree(data.list[i].avgdatasize/1000)));
                        splinemin.push(parseFloat(parseNumberThree(data.list[i].datasizetargetmin/1000)));
                        splinemax.push(parseFloat(parseNumberThree(data.list[i].datasizetargetmax/1000)));
                }
                $(function () {
                    $('#dataSize').highcharts({
                        chart: {
                            zoomType: 'xy',
//                          backgroundColor : {
//                          linearGradient : [ 0, 0,
//                          500, 500 ],
//                          stops : [[ 0,'rgb(250, 250, 250)' ],[ 1,'rgb(61, 139, 221)' ] ]
//                          },
//                          borderColor : '#EBBA95',
//                          borderRadius : 20,
//                          borderWidth : 2,
//                          className : 'dark-container',
//                          plotBackgroundColor : 'rgba(250, 250, 250, .1)',
//                          plotBorderColor : '#339933C',
//                          plotBorderWidth : 1,
                            events:{
                                load:function(){
                                    //document.getElementById("dataSize").style.display="block";
                                }
                            }
                        },
                        title: {
                            text: '服务数据量监控图'
                        },
                        credits: {
                            enabled: false
                        },
                        xAxis: [{
                            categories: columnList,
                            crosshair: true
                        }],
                        yAxis: [{ // Primary yAxis
                            labels: {
                                format: '{value}KB',
                                style: {
                                    color: Highcharts.getOptions().colors[1]
                                }
                            },
                            title: {
                                text: '平均值',
                                style: {
                                    color: Highcharts.getOptions().colors[1]
                                }
                            }
                        }
                        , { // Secondary yAxis
                            title: {
                                text: '指标值',
                                style: {
                                    color: Highcharts.getOptions().colors[1]
                                }
                            },
                            labels: {
                                format: '{value} KB',
                                style: {
                                    color: Highcharts.getOptions().colors[1]
                                }
                            },
                            opposite: true
                        }],
                        tooltip: {
                            shared: true
                        },
                        legend: {
                            layout: 'vertical',
                            align: 'left',
                            x: 100,
                            verticalAlign: 'top',
                            y: 50,
                            floating: true,
                            backgroundColor: (Highcharts.theme && Highcharts.theme.legendBackgroundColor) || '#FFFFFF'
                        },
                        series: [{
                            name: '平均值',
                            type: 'column',
                            yAxis: 1,
                            data: datalist,
//                          colorByPoint : true,
                            tooltip: {
                                valueSuffix: ' KB'
                            }

                        }, {
                            name: '指标最大值',
                            type: 'spline',
                            data: splinemax,
                            tooltip: {
                                valueSuffix: 'KB'
                            }
                        }, {
                            name: '指标最小值',
                            type: 'spline',
                            data: splinemin,
                            tooltip: {
                                valueSuffix: 'KB'
                            }
                        }]
                    });
                });
            }
        });//请求结束
        $("#findLogs").window('close');
    }
</script>

HTML页面部分：
    <div id="runtime" style="height:auto;margin-left:5px;margin-top:5px;width:1000px;height:475px;display:none;">
    </div>
    <div id="dataSize" style="height:auto;margin-left:5px;margin-top:5px;width:1000px;height:475px;display:none;">
    </div>

具体的详细内容可以查看HighChartsAPI查看HighChartsAPI