highcharts日常用法的總結之數據圖頁面傳值,寬度自適應,動態改變標題

最新推荐文章于 2022-06-07 11:46:33 发布

那是遇知吧

最新推荐文章于 2022-06-07 11:46:33 发布

阅读量98

点赞数

分类专栏： highcharts

本文链接：https://blog.csdn.net/weixin_41406727/article/details/102820381

版权

highcharts 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

本文介绍了一种在Highcharts中实现图表点击切换并保持宽度自适应刷新的方法。通过使用reflow()方法和定时器，实现了图表的即时刷新与响应式布局调整。文章详细解释了代码实现过程，包括参数传递、图表标题设置等关键步骤。

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

首先需要用到的是官網的：可以改變標題api

A.html:

 plotOptions: {
                            series: {
                                cursor: 'pointer',
                                point: {
                                    events: {
                                        click: function (e) {
                                            var names = decodeURIComponent( e.point.series.name);
                                            window.open(`A.html?month=${e.point.category}&length=${names}`);
                                        }
                                    }
                                }
                            },
                        },

B.html:接收傳過來的參數

 var perimeters = window.location.search;
        perimeters = decodeURI(perimeters.substr(1).split('&')[0] + "=" + perimeters.substr(2).split('&')[1]);
        var months = perimeters.split('=')[1], type = perimeters.split('=')[3];
console.log(perimeters );//month=Oct=length=Target;
console.log(months);//Oct
console.log(type );//Target

ok，值都接收來了，接下來點擊當前數據圖出現另一個數據圖如何寫呢？這個問題很白癡哈，大家曉得怎麽寫，但是，如何讓兩個數據圖像是有刷新一樣的自適應寬度效果呢？

好這下來分享下成果，我是利用了reflow();這個方法完成的，代碼如下：

B.html

 <div class="highchartscontainer">
            <div id="container" class="container hcartsone"></div>
            <div id="container1" class="container hidechart" style="display:none"></div>
        </div>

B.js

plotOptions: {
                series: {
                    cursor: 'pointer',
                    point: {
                        events: {
                            click: function (e) {
                                var hidechart = document.getElementsByClassName('hidechart')[0],
                                    container = document.getElementsByClassName('container')[0];
                                setTimeout(function () {
                                    hidechart.style.cssText = 'display:inline-block;float:right';
                                    container.style.width = (containersw / 2 - 4) + 'px'; 
                                    hidechart.style.width = (containersw / 2 - 4) + 'px';
                                    var chartmon = e.point.category,
                                        charttype = e.point.series.name;
                                    this.chart.reflow();
                                    chart1.reflow();
                                    chart1.setTitle({text: charttype }, {text: chartmon});
                                }, 500)

                            }
                        }
                    }
                },
            },

chart1：是另一個數據圖的名字
setTimeout：定時器是可要也不可要，
e.point.category：為chart這個數據圖的當前點擊的月份
e.point.series.name：為數據綫的name
this.chart.reflow()：為刷新當前數據圖
chart1.reflow()：為刷新第二個數據圖
chart1.setTitle({text: charttype }, {text: chartmon})：為第二個數據圖的標題賦值，第一個text是正標題title，第二個text是附標題subtitle

儅只有一個數據圖B.html：