使用Chart.min.js展示条形图、雷达图等数据

最新推荐文章于 2024-06-26 11:09:42 发布

置顶

舞步天行者

最新推荐文章于 2024-06-26 11:09:42 发布

阅读量2.5k

点赞数 1

文章标签： js数据图形展示雷达图条形图 jqery

本文链接：https://blog.csdn.net/weixin_37616043/article/details/102819476

版权

本文介绍了如何利用Chart.min.js库在HTML中创建并展示条形图和雷达图。通过jQuery进行交互，提供了一段已测试的HTML代码示例。

摘要由CSDN通过智能技术生成

使用Chart.min.js展示条形图、雷达图等数据

HTML（已测试）：

<div class="new_bottom_title">{$vi['title']}</div>
<div class="new_bottom_content">{$vi['content']}</div>

jQuery：

<script src="__JS__/Chart.min.js"></script>
<script>
   var ctx = document.getElementById('myChart').getContext('2d');
   var dataList = '<?php echo json_encode($list["middle"]);?>';
   var list = JSON.parse(dataList);
   var lab=[];
   var valData=[];
    $.each(list,function(i,val){
        lab[i]=val['title'];
        valData[i]=val['val'];
        });
   var myChart = new Chart(ctx, {
    type: 'bar',
    data: {
        // labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],