使用Highcharts做图形处理

最新推荐文章于 2024-05-30 11:27:58 发布

comLuoJian

最新推荐文章于 2024-05-30 11:27:58 发布

阅读量99

点赞数 1

文章标签： javascript

本文链接：https://blog.csdn.net/luojiancc1/article/details/103852777

版权

使用Highcharts做图形处理

<script src="http://cdn.highcharts.com.cn/highcharts/highcharts.js"></script>
<div id="container" style="width: 600px;height:400px;"></div>
<!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>

图片效果
在这里插入图片描述

comLuoJian

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
使用Highcharts做图形处理

使用Highcharts做图形处理<script src="http://cdn.highcharts.com.cn/highcharts/highcharts.js"></script><div id="container" style="width: 600px;height:400px;"></div><!DOCTYPE html&...
复制链接

扫一扫