highchart

找到一篇highchart的入门教程， 比官方的详细很多，就不拷贝转载了，直接贴链接地址

http://www.52wulian.org/highcharts_1_1_highcharts/

---

我常用的配置文件

var config_timelabelformats = {
    //时间格式配置
    second : '%H:%M',
    minute : '%H:%M',
    hour : '%H:00',
    day : '%m-%d',
    week : '%m-%d',
    month : '%y-%m',
    year : '%Y年'
};
var highchart_config_chip = {
    series_base : {//数据的基本配置
        name : '',
        data : [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
    },
    series_interval_by_time:{
        name : '',
        data : [1, 2, 3, 4, 5, 6, 7, 8, 9, 10],
        pointStart:Date.UTC(2010,12,1),
        pointInterval:60*5*1000,
    },
    yAxis_base : {//y轴基本配置
        title : {
            text : ""
        },
        gridLineColor : '#eee'
    },
    legend_float : {//浮动图示的配置
        enabled : true,
        align : 'left',
        verticalAlign : 'top',
        floating : true,
        y : -10,
        x : 80,
        borderWidth : 0,
    },
    legend_bottom : {//普通的legend
        align : 'center',
        verticalAlign : 'bottom',
        backgroundColor : (Highcharts.theme && Highcharts.theme.legendBackgroundColorSolid) || 'white',
        borderColor : '#CCC',
        borderWidth : 1,
        shadow : false
    },
    xAxis_datetime_interval_day : {//按天间隔模式
        type : 'datetime',
        dateTimeLabelFormats : {
            day : config_timelabelformats.day
        }
    },
    xAxis_datetime_interval_hour : {//按小时间隔模式
        type : 'datetime',
        dateTimeLabelFormats : {
            hour : config_timelabelformats.hour
        }
    },
    xAxis_datetime_full : { //非间隔模式
        type : 'datetime',
        maxPadding : 0.05,
        minPadding : 0.05,
        endOnTick : true,
        startOnTick : true,
        min : null,
        max : null,
        tickPixelInterval : 160,
        gridLineWidth : 1, //默认是0，即在图上没有纵轴间隔线
        gridLineColor : '#eee',
        dateTimeLabelFormats : config_timelabelformats
    },
    plot_option : {
        spline : {
            lineWidth : 1,
            shadow : false,
            marker : {
                enabled : true,
                lineWidth:0,
                radius:0
            }
        },
        line : {
            lineWidth : 0,
            shadow : false,
            color : 'red'
        },
        pie : {
            allowPointSelect : true,
            cursor : 'pointer',
            dataLabels : {
                enabled : false
            },
            showInLegend : true
        }
    }
};

//线性图形=============================================
var chart_config = {
    chart : {
        type : 'spline',
        backgroundColor : null,
        borderWidth : 0,
        borderColor : '#ddd',
        borderRadius : 0,
    },
    plotOptions : highchart_config_chip.plot_option,
    tooltip : {
        valueSuffix : "",
    },
    title : {
        text : "",
        align : "right"
    },
    subtitle : {
        text : null,
    },
    credits : {
        enabled : false,
    },
    xAxis : highchart_config_chip.xAxis_datetime_full,
    yAxis : highchart_config_chip.yAxis_base,
    tooltip : {
        valueSuffix : null
    },
    legend : highchart_config_chip.legend_float,
    series : [highchart_config_chip.series_base]
};

Highcharts.setOptions({
                        global:{
                            useUTC:false
                        }
                    });