html里，用什么绘制曲线图

html-css04

html里，用什么绘制曲线图,第1张

选数据区域——菜单栏——插入——图表——自定义类型：两轴线-柱图——下一步——下一步： 标题：输入相应标题；网络线：数值(Y)轴：主要网络线；图例：显示图例（取消勾选，你的抓图没有）；数据标志：值；数据表：显示数据表——完成。

使用原生js自己写或js库（框架）都是可以的，由于目前HTML5并不是所有的浏览器都完美支持，使用兼容性比较好的js库是个不错的选择。

例如Highcharts图标库就可以实现各类曲线图、折线图、区域图、3D图、柱状图等等。具体使用参考：http://www.hcharts.cn/demo/index.php。

Highcharts中做折线图的demo代码可以作为参考：

<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>

  <script>

    $(function () {

    $('#container').highcharts({

        chart: {

            type: 'line'

        },

        title: {

            text: 'Monthly Average Temperature'

        },

        subtitle: {

            text: 'Source: WorldClimate.com'

        },

        xAxis: {

            categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']

        },

        yAxis: {

            title: {

                text: 'Temperature (°C)'

            }

        },

        tooltip: {

            enabled: false,

            formatter: function() {

                return '<b>'+ this.series.name +'</b><br/>'+this.x +': '+ this.y +'°C'

            }

        },

        plotOptions: {

            line: {

                dataLabels: {

                    enabled: true

                },

                enableMouseTracking: false

            }

        },

        series: [{

            name: 'Tokyo',

            data: [7.0, 6.9, 9.5, 14.5, 18.4, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6]

        }, {

            name: 'London',

            data: [3.9, 4.2, 5.7, 8.5, 11.9, 15.2, 17.0, 16.6, 14.2, 10.3, 6.6, 4.8]

        }]

    })

})

  </script>

</head>

<body>

  <div id="container" style="min-width:700pxheight:400px"></div>

</body>

</html>