使用highcharts生成统计图

来源：互联网发布：安卓内存优化郭霖编辑：程序博客网时间：2024/05/18 02:39

导入核心js类库 :highcharts.js、highcharts.src.js、exporting.js、exporting.src.js

定义图形展示的div：

<!doctype html><html lang="en"><head>  <script type="text/javascript" src="http://cdn.hcharts.cn/jquery/jquery-1.8.3.min.js"></script>  <script type="text/javascript" src="http://cdn.hcharts.cn/highcharts/highcharts.js"></script>  <script type="text/javascript" src="http://cdn.hcharts.cn/highcharts/exporting.js"></script></head><body>  <div id="container" style="min-width:700px;height:400px"></div></body></html><pre name="code" class="plain">

4.编写展示图形数据的js:

//创建组合图表对象function createBar(categories, datas,id,titles,yTitle,tooltipTitle) {new Highcharts.Chart({//创建对象chart : {renderTo : id, // 放置图表的DIV容器对应的id属性 /*type : 'column',//定义报表类型*/height:480,   /* margin: [ 100, 100, 100, 100]*/},//标题title : {text : titles,style : {color : '#000',fontSize : '20px',}},//X轴xAxis : {categories : categories,//获取X轴名字 /*tickWidth:1,//刻度的宽度           lineWidth :1,//自定义x轴宽度  *//*lineColor: '#197F07',//设置X轴颜色  *///tickPixelInterval:10 ,//决定着横坐标的密度 //tickLength:5, //tickWidth:5,labels : {//step:2,//设置间隔显示 align : 'center',color : '#000000',style : {fontSize : '13px',fontFamily : 'Verdana, sans-serif',}}},//设置柱的宽度plotOptions: {    column: {        pointPadding: 0.2,        borderWidth: 0,        pointWidth: 70    }},//Y轴yAxis : {min : 0,title : {text : yTitle,},},//设置版本信息credits : {enabled : false},//图例legend : {enabled : false},//导出统计图exporting : {filename : titles,enabled : true},//提示框tooltip : {formatter : function() {return tooltipTitle + this.y + '元';}}, //数据列                                                                      series: [{                                                                        type: 'column',//柱状图                                                        name: '柱状图',                                                            data: datas                                              }, {                                                                        type: 'spline', //折线图                                                        name: '折线图',                                                        data: datas,                                         marker: {                                                               lineWidth: 2,                                                         lineColor: Highcharts.getOptions().colors[3],                         fillColor: 'white'                                                    }                                                                   }]  });}

/** * 根据传入的类型生成图形 * @param type 类型 * @param categories x轴 * @param charsdata 数据 * @param titles 标题 * @param id divID */function createCurveGraphic(type,categories,charsdata,titles,id){new Highcharts.Chart({ //创建对象        chart: {        renderTo : id, // 放置图表的DIV容器对应的id属性         type: ''+type+''//            margin: [ 100, 100, 100, 100]        },        //标题        title: {            text: titles,            x: -20        },        subtitle: {            text: 'Source: cdsf.com',            x: -20        },        xAxis: {//        maxZoom:3600000,            categories: categories,//            tickWidth: 1,//设置X轴坐标点是否出现占位及其宽度              tickInterval:(Math.round(categories.length/10) ),//设置横坐标密度  //            maxZoom: 14 * 24 * 3600000, // fourteen days        },        yAxis: {            title: {                text: 'numerical value'            },            plotLines: [{                value: 0,                width: 1,                color: '#808080'            }]        },        tooltip: {            valueSuffix: ''        },        legend: {            layout: 'vertical',            align: 'right',            verticalAlign: 'middle',            borderWidth: 0        },        series: charsdata    });};

如果你想详细的了解highchart生成不同图形的一些方法,请到highcart中文网查看案例点击打开链接

0 0