html怎么用js特效做折线图

JavaScript08

html怎么用js特效做折线图,第1张

使用原生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>

Cartjs折线图ttl一位置的设置是什么呢？其实呢我们js折线图ttl一者位置的设置是在我们的头像也就是左上角里面点进去再找到设置才行的，所以说charts折线图tl1位置的设置是在左上角。

在平时开发项目时，免不了需要对数据进行图表显示的需求，比如：趋势图、饼状图、柱形图等。

Echarts.js是来自百度团队研发的图表js插件，利用HTML+js实现折线图、饼状图、热点图、3d图形等等，可在PC和移动端显示，加载速度快，功能丰富。

https://echarts.apache.org/zh/index.html

官网首页有着很多实例以及相关介绍，获取echart.js可以从本人百度网盘获取，包含所有图表组件，可直接引用。

链接： https://pan.baidu.com/s/1IEm8NGwqq4ExgYWp8mz9CA

提取码：aihy

为Echarts放置一个具备宽高的DOM容器

Echarts加载数据