highcharts一个charts加载多个id，循环charts并动态加载series数据

最新推荐文章于 2021-06-17 14:52:33 发布

那是遇知吧

最新推荐文章于 2021-06-17 14:52:33 发布

阅读量1.9k

点赞数 1

CC 4.0 BY-SA版权

分类专栏： highcharts 文章标签： highcharts

本文链接：https://blog.youkuaiyun.com/weixin_41406727/article/details/88370902

本文介绍了如何使用Highcharts在一个页面上创建多个图表，通过ajax请求和for循环实现图表的动态生成。内容包括两种解决方案，强调了在JSON数据中设置图表ID的重要性，并提供了HTML和JSON示例。此外，还提到了数据值颜色根据数值大小自动调整的额外知识点。

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

PS：因為在工作中經常會用的這個插件，所以做個日常歸納方便自己查閱，也幫助大家更快速的解決關於這個插件的各種問題和需要的樣式，希望也能幫助大家，謝謝，如有雷同純屬巧合，慢慢完善中。

因为公司需求要在一个页面加载多个图表，如果一个id写一个图表的话，不知道要写多少代码，所以就开始简化代码之路；而且series里面的数据需要动态加载，我也不知道会加载多少数据，所以，能简化就简化吧，在此给大家分享一下，有什么问题或者错误的地方还请纠正，感谢大家。

解决思路分析

第一种办法：

1：首先的解决思路是，同时加载多个图表的话，必须要在ajax下面套一个for循环，然后循环整个charts

2：因为图表是根据id来分配放在那里的，所以，在json中要放一个专门放id的属性和属性值，也有其他办法，以后在完善吧！话不多说上代码~

3：我懒得写命名这些啦，大家看得懂就可以哟，取名字什么的最烦了，哈哈哈，见谅哈~~~

HTML：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
    </head>
    <body>
        <div id="container1" style="min-width:400px;height:400px"></div>
        <div id="container2" style="min-width:400px;height:400px"></div>
        <script type="text/javascript" src="js/jquery.min.js"></script>
        <script type="text/javascript" src="js/highcharts.js"></script>
        <script>
            $(document).ready(function() {
                $.ajax({
                    type: "get",
                    url: "js/index.json",//加载json数据
                    dataType: "json",
                    async: true,
                    success: function(reDatea) {
                        for(var bigxh = 0; bigxh < reDatea.reDates.length; bigxh++) {
                            var reDate = reDatea.reDates[bigxh];
                            console.log(JSON.stringify(reDate.idd));
                            var ids = reDate.idd;
                            var chart = Highcharts.chart({
                                chart: {
                                    renderTo: ids,
                                    type: 'line'
                                },
                                title: {
                                    text: '<span style="font-family:Arial">' + reDate.ChartName + '</span>'
                                },
                                subtitle: {
                                    text: ''
                                },
                                xAxis: {
                                    categories: reDate.XAxisName
                                },
                                yAxis: {
                                    title: {
                                        text: ''
                                    }
                                },