highcharts图表生成插件学习心得

　　研究了一天的highcharts插件终于实现了原型要求的效果，记录下来备用：

html代码如下：

<table id="project_list"></table>

js代码如下：

//图表生成
function report_charts(){
	var category=[];
	for(var i=30;i>=0;i-=5){
		category.push(global_tool_getdate(-i).substring(5));
	}
	$('#charts_id').highcharts({
        title: {
            text: null//去图表标题（顶部）
        },
        chart:{
        	spacing:50//图表外框的内边距，上下左右留50px,相当于css的padding:50px来理解
        },
        xAxis: {
           categories: category,//x坐标的日期值数组
           tickmarkPlacement: 'on',//实现文字显示在竖线下，见<1>
           title: {
                enabled: false
            }
        },
        yAxis: {
            title: {
                text: null//去除y坐标的文字提示
            },
            min: 0//实现y坐标从0开始算，默认从5开始算
        },
        plotOptions: {
            line: {
                marker: {
                    enabled: false//去掉节点的显示，见<4>
                }
            }
        },
        tooltip: {
            valueSuffix: '元'//设置提示信息里的单位，见<2>
        },
        legend: {//折线提示定位，见<3>
            layout: 'vertical',
            align: 'left',
            verticalAlign:'top',
            borderWidth: 0
        },
        series: [{
            name: '近30日趋势',
            data: [7.0, 6.9, 9.5, 14.5, 18.2, 51.5,23]  //数据提供
        }]
    });
}

js代码如下：

//图表生成
function report_charts(){
	var category=[];
	for(var i=30;i>=0;i-=5){
		category.push(global_tool_getdate(-i).substring(5));
	}
	$('#charts_id').highcharts({
        title: {
            text: null
        },
        chart:{
        	spacing:50
        },
        xAxis: {//不设置tickmarkPlacement: 'on'，默认文字在2个竖线中间，见<3>
           categories: category,
        },
        yAxis: {
            title: {
                text: null
            },
            min: 0
        },
        plotOptions: {
            line: {
                dataLabels: {
                    enabled: true//节点显示，见<1>
                },
		enableMouseTracking: false//鼠标移到节点上不显示提示信息，见<2>
            }
        },
        tooltip: {
            valueSuffix: '元'
        },
        legend: {
            layout: 'vertical',
            align: 'left',
            verticalAlign:'top',
            borderWidth: 0
        },
        series: [{
            name: '近30日趋势',
            data: [7.0, 6.9, 9.5, 14.5, 18.2, 51.5,23]
        }]
    });
}

还有如果要去掉图片右下角默认的http://www.highcharts.com链接，打开highcharts.js文件搜索     http://www.highcharts.com

找到credits:{enabled:!0,text:"",href:"",的text和href值变成""就可去掉链接