工业化中的数据可视化大屏学习笔记(一)

------------highcharts学习日记和随笔------------

1.下载什么的就不说啦,大家有需要的可以去官网下载:https://www.highcharts.com.cn/docs

2.个人学习和使用时用的构造函数,其他方法有chart.rederTo来定和在引入jQuery后用$("id的定义名").highcharts({});来定义

3.个人在使用中出现的一个错误,所有的数据都可以获取但是在HTML页面中无法显示图表,个人在这里说一下,是因为jQuery文件和highcharts文件放置顺序的问题,改正为先放jquery,再放heighchaert;

4.基本图表只需要引用jquery.min.js和heighchaert.js就可以

5.(引入jQuery文件后)图表定义中 var chart={ type:line(默认直线)spline(曲线)pie(饼图)column(柱状)这是基本图表}

临时补充:在图表的表土中不需要的可以将text:"标题"//设置为null,也可以自定义修改

6.在其图表右下角有一个官网签名取消为 var credits={enabled:false//禁用,true//启用}

7.主副标题(title,subtitle)

8.x.y轴信息:xAxis和yAxis

9.图表数据:series(name data)

10.数据格式官网推荐使用json数据格式,其他数据格式请大家自己研究

11.下面是一个简单的图片,默认为横向柱状图:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>第一个 Highcharts 图表</title>
</head>
<body>
    <!-- 图表容器 DOM -->
    <div id="container" style="width: 600px;height:400px;"></div>
    <!-- 引入 highcharts.js -->
    <script src="http://cdn.highcharts.com.cn/highcharts/highcharts.js"></script>
    <script>
        // 图表配置
        var options = {
            chart: {
                type: 'bar'                          //指定图表的类型,默认是折线图(line)
            },
            title: {
                text: '我的第一个图表'                 // 标题
            },
            xAxis: {
                categories: ['苹果', '香蕉', '橙子']   // x 轴分类
            },
            yAxis: {
                title: {
                    text: '吃水果个数'                // y 轴标题
                }
            },
            series: [{                              // 数据列
                name: '小明',                        // 数据列名
                data: [1, 0, 4]                     // 数据
            }, {
                name: '小红',
                data: [5, 7, 3]
            }]
        };
        // 图表初始化函数
        var chart = Highcharts.chart('container', options);
    </script>
</body>
</html>
复制即可使用

12.其实highcharts数据可视化中大多数为函数,可以多看看官网,学习一下函数的使用,

13.不喜勿喷,谢谢

上一篇:DEV Chart控件鼠标选中某条曲线


下一篇:vue中使用v-echars