首页 > 安全资讯 >

Highcharts翻译系列之十九:曲线图例子(1)

13-04-03

Highcharts翻译系列之十九:曲线图例子(1)代码:[html]<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"><html><head> <title>重量曲线图</title> <script type="text/javascript" s...

Highcharts翻译系列之十九:曲线图例子(1)
 

代码:

[html]
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> 
<html> 
<head> 
    <title>重量曲线图</title> 
    <script type="text/javascript" src="Lib/Scripts/jquery-1.7.2.min.js"></script> 
    <script type="text/javascript"> 
        $(function () { 
            var splinechart; 
            $(document).ready(function () { 
                splinechart = new Highcharts.Chart({ 
                    chart: { 
                        renderTo: 'splineContainer', 
                        type: 'spline', 
                        margin: [25, 30, 70, 50] 
                    }, 
                    title: { 
                        text: '体重', 
                        x: 50, 
                        y: 10, 
                        style: { 
                            display: 'none' 
                        } 
                    }, 
                    color: [ 
                    '#006ebe' 
                    ], 
                    subtitle: { 
                        style: { 
                            display: 'none' 
                        } 
                    }, 
                    xAxis: { 
                        lineWidth: 1, 
                        lineColor: '#dfe7ef', 
                        gridLineWidth: 0, 
                        lineColor: '#000000', 
                        startOnTick: true, 
                        tickPixelInterval: 110, 
                        type: 'datetime', 
                        labels: { 
                            rotation: -45, 
                            y: 40, 
                            style: { 
                                color: '#000000', 
                                fontSize: '8px', 
                                fontWeight: 'normal' 
 
                            } 
                        }, 
                        tickColor: '#000000', 
                        tickLength: 5, 
                        tickWidth: 1, 
                        dateTimeLabelFormats: { 
                            day: '%Y-%m-%d', 
                            week: '%Y-%m-%d', 
                            month: '%Y-%m-%d', 
                            year: '%Y-%m-%d' 
                        }, 
                        title: { 
                            style: 
                      { 
                          display: 'none' 
                      } 
                        } 
 
                    }, 
              yAxis: { 
                        allowDecimals: true, 
                        startOnTick: true, 
                        endOnTick: true, 
                        lineWidth: 1, 
                        gridLineWidth:0, 
                        gridLineColor: '#d3d3d3', 
                        lineColor: '#000000', 
                        tickColor: '#000000', 
                        tickLength: 5, 
                        tickWidth: 1, 
                        title: { 
                            text: '重量(kg)', 
                            style: { 
                                color: '#02528b', 
                                fontSize: '12px', 
                                fontWeight: 'normal' 
 
                            } 
                        }, 
                        labels: { 
                            style: { 
                                color: '#000000', 
                                fontSize: '10px', 
                                fontWeight: 'normal' 
                            } 
                        } 
                    }, 
                    legend: { 
                        layout: 'horizontal', 
                        backgroundColor: '#ffffff', 
                        align: 'right', 
                        verticalAlign: 'top', 
                        x: 0, 
                        y: -10, 
                        floating: true, 
                        shadow: false, 
                        borderWidth: 0 
                    }, 
                    tooltip: { 
                        shared: true, 
                        crosshairs: true 
                    }, 
                    plotOptions: { 
                        spline: { 
                            shadow: false, 
                            animation: false, 
                            lineWidth: 1 
                        }, 
                        series: { 
                            color: '#000000', 
                            marker: { 
                                enabled: true, 
                                fillColor: '#006ebe', 
                                lineWidth: 1, 
                                lineColor: '#006ebe', 
                                radius: 3 
                            } 
                        } 
                    }, 
                    series: [{ 
                        name: '重量', 
                        data: [[Date.UTC(2012, 9, 8, 10, 22, 00), 88.8], [Date.UTC(2012, 9, 10, 10, 22, 00), 87.9], [Date.UTC(2012, 9, 13, 10, 00, 00), 87.4], [Date.UTC(2012, 9, 14, 12, 05), 87.2], [Date.UTC(2012, 9, 16, 10, 00, 00), 87.2], [Date.UTC(2012, 9, 18, 10, 00, 00), 86.8], [Date.UTC(2012, 9, 22, 10, 00, 00), 86.5], [Date.UTC(2012, 9, 25, 10, 00, 00), 86.5], [Date.UTC(2012, 9, 30, 10, 00, 00), 86.4]], 
                        dataLabels: { 
                            enabled: true 
                        } 
 
                    }] 
 
                }); 
            }); 
 
        }); 
    </script> 
</head> 
<body> 
    <script src="Lib/Highcharts-2.2.5/js/highcharts.js" type="text/javascript"></script> 
    <!-- <script src="../../js/modules/exporting.js"></script>--> 
    <div id="bg" style="margin: 0; padding: 0;"> 
        <div style="width: 736px; margin: 0 auto; height: 27px; line-height: 27px; font-family: Microsoft YaHei; 
            font-size: 14px"> 
            <span style="color: #006ebd;">体重曲线图:</span><span style="font-size: 14px; color: #000000;">单位[kg]</span></div> 
        <div id="splineContainer" style="width: 736px; height: 310px; margin: 0 auto; padding-bottom: 10px; 
            border-bottom: 1px dashed #9b9b9b;"> 
        </div> 
    </div> 
</body> 
</html> 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
    <title>重量曲线图</title>
    <script type="text/javascript" src="Lib/Scripts/jquery-1.7.2.min.js"></script>
    <script type="text/javascript">
        $(function () {
            var splinechart;
            $(document).ready(function () {
                splinechart = new Highcharts.Chart({
                    chart: {
                        renderTo: 'splineContainer',
                        type: 'spline',
                        margin: [25, 30, 70, 50]
                    },
                    title: {
                        text: '体重',
                        x: 50,
                        y: 10,
                        style: {
                            display: 'none'
                        }
                    },
                    color: [
                    '#006ebe'
                    ],
                    subtitle: {
                        style: {
                            display: 'none'
                        }
                    },
                    xAxis: {
                        lineWidth: 1,
                        lineColor: '#dfe7ef',
                        gridLineWidth: 0,
                        lineColor: '#000000',
                        startOnTick: true,
                        tickPixelInterval: 110,
                        type: 'datetime',
                        labels: {
                            rotation: -45,
                            y: 40,
                            style: {
                                color: '#000000',
                                fontSize: '8px',
                                fontWeight: 'normal'

                            }
                        },
                        tickColor: '#000000',
                        tickLength: 5,
                        tickWidth: 1,
                        dateTimeLabelFormats: {
                            day: '%Y-%m-%d',
                            week: '%Y-%m-%d',
                            month: '%Y-%m-%d',
                            year: '%Y-%m-%d'
                        },
                        title: {
                            style:
                      {
                          display: 'none'
                      }
                        }

                    },
              yAxis: {
                        allowDecimals: true,
                        startOnTick: true,
                        endOnTick: true,
                        lineWidth: 1,
                        gridLineWidth:0,
                        gridLineColor: '#d3d3d3',
                        lineColor: '#000000',
                        tickColor: '#000000',
                        tickLength: 5,
                        tickWidth: 1,
                        title: {
                            text: '重量(kg)',
                            style: {
                                color: '#02528b',
                                fontSize: '12px',
                                fontWeight: 'normal'

                            }
                        },
                        labels: {
                            style: {
                                color: '#000000',
                                fontSize: '10px',
                                fontWeight: 'normal'
                            }
                        }
                    },
                    legend: {
                        layout: 'horizontal',
                        backgroundColor: '#ffffff',
                        align: 'right',
                        verticalAlign: 'top',
                        x: 0,
                        y: -10,
                        floating: true,
                        shadow: false,
                        borderWidth: 0
                    },
                    tooltip: {
                        shared: true,
                        crosshairs: true
                    },
                    plotOptions: {
                        spline: {
                            shadow: false,
                            animation: false,
                            lineWidth: 1
                        },
                        series: {
                            color: '#000000',
                            marker: {
                                enabled: true,
                                fillColor: '#006ebe',
                                lineWidth: 1,
                                lineColor: '#006ebe',
                                radius: 3
                            }
                        }
                    },
                    series: [{
                        name: '重量',
                        data: [[Date.UTC(2012, 9, 8, 10, 22, 00), 88.8], [Date.UTC(2012, 9, 10, 10, 22, 00), 87.9], [Date.UTC(2012, 9, 13, 10, 00, 00), 87.4], [Date.UTC(2012, 9, 14, 12, 05), 87.2], [Date.UTC(2012, 9, 16, 10, 00, 00), 87.2], [Date.UTC(2012, 9, 18, 10, 00, 00), 86.8], [Date.UTC(2012, 9, 22, 10, 00, 00), 86.5], [Date.UTC(2012, 9, 25, 10, 00, 00), 86.5], [Date.UTC(2012, 9, 30, 10, 00, 00), 86.4]],
                        dataLabels: {
                            enabled: true
                        }

                    }]

                });
            });

        });
    </script>
</head>
<body>
    <script src="Lib/Highcharts-2.2.5/js/highcharts.js" type="text/javascript"></script>
    <!-- <script src="../../js/modules/exporting.js"></script>-->
    <div id="bg" style="margin: 0; padding: 0;">
        <div style="width: 736px; margin: 0 auto; height: 27px; line-height: 27px; font-family: Microsoft YaHei;
            font-size: 14px">
            <span style="color: #006ebd;">体重曲线图:</span><span style="font-size: 14px; color: #000000;">单位[kg]</span></div>
        <div id="splineContainer" style="width: 736px; height: 310px; margin: 0 auto; padding-bottom: 10px;
            border-bottom: 1px dashed #9b9b9b;">
        </div>
    </div>
</body>
</html>

 

运行效果:

 

 

 

相关文章
最新文章
热点推荐