JS图表制作及点击按钮切换图表样式

小鼠米奇

于 2024-05-06 16:44:32 发布

阅读量1.1k

点赞数 31

文章标签： javascript 开发语言 ecmascript

本文链接：https://blog.youkuaiyun.com/weixin_56187723/article/details/138499790

版权

本文介绍了如何在HTML中通过Chart.js库实现柱状图和折线图，并展示了如何在JavaScript中动态切换图表类型，以及处理和展示数据的过程。

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

1、首先，在HTML文件中引入Chart.js库：

//这里是随便的一个，可以去Echart官网上下载。这里是网址：Apache ECharts

<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>

2、在HTML中设置一个容器，用来放置图表：

3、在JS中设置图表：

let myChart = echarts.init(document.getElementById('main'));

// 指定图表的配置项和数据
let option = {
   title: {
       text: '鞋子'
   },
   tooltip: {},
   legend: {
       data: ['价格']
   },
   xAxis: {
       data: array_name //此处为X轴数据，可自行替换
   },
   yAxis: {},
   series: [{
           name: '价格',
           type: 'bar',
           data: array_price //此处为Y轴数据，可自行替换
       }
   ]
};

// 使用刚指定的配置项和数据显示图表。

myChart.setOption(option);

//下面是通过按钮改变图表样式：
document.getElementById('line').onclick = function() {
   option.series[0].type = 'line';
   console.log(option.series[0].type);
   myChart.setOption(option);
}
document.getElementById('bar').onclick = function() {
   option.series[0].type = 'bar';
   console.log(option.series[0].type);
   myChart.setOption(option);
}

这里是数据，及处理后的数据：

let arr = [

   {
       id: 1,
       name: 'YSL',
       price: '19.99',
       num: 59,
       income: 500
   },
   {
       id: 2,
       name: '胶鞋',
       price: '79.99',
       num: 69,
       income: 250
   },
   {
       id: 3,
       name: '拖鞋',
       price: '59.99',
       num: 199,
       income: 300
   },
   {
       id: 4,
       name: '棉鞋',
       price: '9.99',
       num: 299,
       income: 200
   },
   {
       id: 5,
       name: '豆丁',
       price: '39.99',
       num: 99,
       income: 400
   },
   {
       id: 6,
       name: '长筒靴',
       price: '99.99',
       num: 39,
       income: 570
   },
   {
       id: 7,
       name: '高跟',
       price: '29.99',
       num: 19,
       income: 200
   }

]
console.log(arr);
let array_price = [];
let array_name = [];
let array_num = [];
let array_income = [];
for (let i = 0; i < arr.length; i++) {
   array_price.push(arr[i].price);
   array_name.push(arr[i].name)
   array_num.push(arr[i].num)
   array_income.push(arr[i].income)
}