ChatGPT 完成动态柱形图操作

阿里数据专家

已于 2024-02-19 16:57:24 修改

阅读量410

点赞数

文章标签： chatgpt

于 2023-08-18 14:14:03 首次发布

本文链接：https://blog.csdn.net/sunzhuan158/article/details/132360536

版权

本文介绍了如何利用ChatGPT生成一个动态条形图，无需编写代码，仅通过HTML和JavaScript，配合Echarts库，展示如何创建一个带有随机数据、不同颜色表示和滚动功能的图表实例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

这样的动态柱形图，我们不用写一行代码，直接用ChatGPT，人工智能来实现，用HTML，JS就可以完成操作。

AIGC ChatGPT 职场案例
AI 绘画与短视频制作
PowerBI 商业智能 68集
数据库Mysql 8.0 54集
数据库Oracle 21C 142集
Office 2021实战应用
Python 数据分析实战，
ETL Informatica 数据仓库案例实战
Excel 2021实操 100集，
Excel 2021函数大全 80集
Excel 2021高级图表应用89集，
Excel 2021大屏可视化制作 56集
Excel 2021实用技巧300集
PPT 2021 商业汇报实战应用69集
数据分析可视化Tableau 80集
数据可视化FineReport 50集
送你各类文档模板PPT，表格，大屏可视化超过5000+模板
案例实战 https://edu.csdn.net/combo/detail/2552

在ChatGPT中，我们进行提问如下：

你现在是一个数据分析师，请使用HTML，JS，Echarts，来完成一个动态条形图，条形图方向横向，数据可以随机生成，并且随机生成10个不同的商品名称，每个类别分别用不同的颜色表示，数据从小到大进行排序，自动在图表中进行滚动，按年份进行滚动，请写出一个完整的Demo，可以运行的

HTML代码如下：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>动态条形图</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.2.2/echarts.min.js"></script>
</head>
<body>
    <div id="chart" style="width: 100%;height:800px;"></div>
    <script src="main.js"></script>
</body>
</html>

JS代码如下：

window.onload = function () {
    // 随机生成10个商品名称
    var products = generateRandomProducts();
    // 按年份从小到大排序
    products.sort(function (a, b) { return a.year - b.year; });
    
    var chart = echarts.init(document.getElementById('chart'));
    
    var option = {
        xAxis: {
            type: 'category',
            data: products.map(function (product) { return product.name; })
        },
        yAxis: {
            type: 'value'
        },
        series: [{
            data: products.map(function (product) { return product.sales; }),
            type: 'bar',
            barWidth: '60%',
            itemStyle: {
                color: function (params) { 
                    // 根据商品索引返回不同的颜色
                    var colorList = ['#40a9ee', '#ff8072', '#6dd5fa', '#ff7c7c', '#ffd4a5', '#b6e880', '#ff9f7f', '#baa080', '#67b5fd', '#ff997f'];
                    return colorList[params.dataIndex % colorList.length]; 
                }
            }
        }]
    };
    
    chart.setOption(option);
    
    // 自动滚动条形图
    setInterval(function () {
        // 假设我们每年增加10%的销售量
        products.forEach(function (product, index) {
            product.sales = (product.sales * 1.1).toFixed(2);
            if (index === products.length - 1) {
                // 如果已经是最后一年的数据，那么重置第一年的数据以便重新排序和滚动
                products[0].sales = 0;
            }
        });
        // 按年份从小到大排序，实现滚动效果
        products.sort(function (a, b) { return a.year - b.year; });
        chart.setOption({series: [{data: products.map(function (product) { return product.sales; })}]});
    }, 1000); // 每秒滚动一次
};

// 生成随机产品数据，每个产品包含名称、年份和销售额三个属性
function generateRandomProducts() {
    var products = [];
    for (var i = 0; i < 10; i++) {
        products.push({
            name: 'Product ' + (i + 1),
            year: Math.floor(Math.random() * 10) + 1, // 生成1-10的随机年份
            sales: Math.floor(Math.random() * 1000) // 生成0-999的随机销售额（四舍五入保留两位小数）
        });
    }
    return products;
}

将JS代码与HTML代码拷贝到记事本当中，分别另存为保存就可以了。非常实用。