个人中心
gpt4 book ai didi

javascript - 选择单个 HighCharts 容器会导致其他容器改变位置

转载 作者：太空宇宙 更新时间：2023-11-03 23:12:24 24 4
gpt4 key购买 nike

我正在使用 HighCharts，在选择其中一个图表时我看到了一些奇怪的功能。

当且仅当我选择右上方的仪表时，它会导致其他仪表移动它们的位置。所有其他仪表工作正常。

我无法弄清楚为什么会这样，希望有人能指出我遗漏了什么。

我的后端使用 Python Flask 模块，HTML 使用 JINJA2 Framework 和 JavaScript。

Front.html

<!doctype html>
<html>

<head>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
    <script src="http://code.highcharts.com/highcharts.js"></script>
    <script src="http://code.highcharts.com/highcharts-more.js"></script>
    <script src="http://code.highcharts.com/modules/solid-gauge.js"></script>
     <link rel="stylesheet" type="text/css" href=" {{url_for('static',filename='style.css')}}"/>
</head>


<body id="body"
<div class="header">
        <span id="headerText">Current ISIS Connections </span>
    </div>



<div id="gaugeTable">

        <div id="Workgroup-01" class="gaugeCell"> </div>
        <div id="Workgroup-02" class="gaugeCell" ></div>
        <div id="Workgroup-04" class="gaugeCell"></div>
        <div id="Workgroup-05" class="gaugeCell"></div>

        <div id="Workgroup-06" class="gaugeCell"></div>
        <div id="Workgroup-03" class="gaugeCell"></div>
        <div id="Workgroup-3A" class="gaugeCell"></div>
        <div id="Workgroup-07" class="gaugeCell"> </div>

</div>


<script type="text/javascript">
var workgroups =['Workgroup-01','Workgroup-02','Workgroup-03','Workgroup-3A','Workgroup-04',
        'Workgroup-05','Workgroup-06','Workgroup-07'];

$(function ()
 {

    var gaugeOptions = {

        chart: {
            type: 'solidgauge'
        },

        title: 'test',

        pane: {
            // Positioning
            center: ['50%', '85%'],
            // img size
            size: '100%',
            // full circle/half circle
            startAngle: -90,
            endAngle: 90,
            // gauge coloring
            background: {
                backgroundColor: (Highcharts.theme && Highcharts.theme.background2) || '#000',
                // Inner semi circle sizing
                innerRadius: '60%',
                outerRadius: '100%',
                shape: 'arc'
            }
        },

        tooltip: {
            enabled: false
        },

        // the value axis
        yAxis: {
            stops: [
                // Set the limits for coloring
                [0.1, '#55BF3B'], // green
                [0.5, '#DDDF0D'], // yellow
                [0.9, '#DF5353'] // red
            ],
            // Outside Line buffer
            lineWidth: 0,

            // IDK
            minorTickInterval: null,
            // IDK
            tickPixelInterval: 400,
            //IDK
            tickWidth: 0,
            title: {
                // Title Location
                y: -70
            },
            labels: {
                // Bottom Label Offset
                y: 16
            }
        },

        plotOptions: {
            solidgauge: {
                dataLabels: {
                    y: 15,
                    borderWidth: 0,
                    useHTML: true
                }
            }
        }
    };


    // The  gauges
    //
    //
    //
    for( i in workgroups){


        $('#'+workgroups[i]).highcharts(Highcharts.merge(gaugeOptions, {
            yAxis: {
             min: 0,
             max: 200,
                title: {
                    text: workgroups[i]
                }
            },

            credits: {
                enabled: false
            },

            series: [{
                name: workgroups[i],
                data: [0],
                dataLabels: {
                    format: '<div style="text-align:center"><span style="font-size:25px;color:' +
                        ((Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black') + '">{y}</span><br/>' +
                        '<span style="font-size:12px;color:silver">clients</span></div>'
                },
                tooltip: {
                    valueSuffix: ' clients'
                }
            }]

        }));
    }
 }
);



function get_gauge_data(){
   $.get('get_gauge_data',
        function(returnedData){


                $.each(returnedData, function(key,value){
                    for(i in workgroups){


                        divID = "#"+workgroups[i];

                         var chart = $(divID).highcharts(),
                            point,
                            newVal,
                            inc;

                         if (chart) {
                            point = chart.series[0].points[0];
                            newVal = value[workgroups[i]];
                         }
                         point.update(newVal);
                    }



                });

        }
   );


}



$(document).ready(function() {
    //trigger repeating calls
    get_gauge_data();
    setInterval(get_gauge_data, 5000);
});

var highCharts = document.getElementsByClassName("gaugeCell");

var highChartsListener = function(){

        for(var i = 0;i<highCharts.length;i++){
             if(this == highCharts[i]){
                $(this).addClass("selected");
             }else{
                $(highCharts[i]).removeClass("selected");

             }
        }
}

for(var i = 0;i<highCharts.length;i++){
    highCharts[i].addEventListener('click', highChartsListener,false);
}






</script>
</body>
</html>

样式.css

/* reset browser defaults */

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p,
blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em,
img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i,
center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table,
caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details,
embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby,
section, summary, time, mark, audio, video {
    margin: 0;
    border: 0;
    padding: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}




/* **************************************************************************************** */
/* Main body formatting */
body {
    background-color:#D7D5C9;
    font-family: verdana;
    text-align: left;
}



/* **************************************************************************************** */
/* Header and Footer */
.header {
    background-color: #4C453D;
    color:#FF6C00;
    font-size:24px;
    text-indent: 20px;
    padding:8px 25px 50px;
}

/*
.footer{
    background-color: #4C453D;
    color:#FF6C00;
    text-indent: 20px;
    height: 20px;
    width: 100%;
    font-size:12px;
}
/* manually set width of the 1st/status column so it's big enough and fixed */
.footer #status {
    width:70px;
}

*/




/* **************************************************************************************** */
/* Gauge Formatting */

.test{
    border-collapse:collapse;
    margine: 5px;
    height: 450px;
    width: 900px;
}

#gaugeTable{
    border-collapse: collapse;
    margin: 5px;
    height: 450px;
    width: 900px;
}


.gaugeCell{
    border-width:4px;
    border-color:gray;
    border-style:solid;
    padding: 0px;
    height: 200px;
    width: 200px;
    float:left;
}

.selected {
    border: 3px solid #0E5342;
    background-color: #A8DB92;

}

扭曲的图片

Normally the Highlighted Part has the gauges

最佳答案

我想你有几个选择。

  • 使用 display: inline-block 代替 float ，并从父元素中移除 white-space: nowrap。这将使它们都适合父 div。

  • 添加的绿色边框为 3x，而正常边框为 4px。将它也更改为 4px 可保持所有尺寸相同并保留布局。

  • 在行中的最后一个元素上使用“clearfix”将重置其高度以适合。

关于javascript - 选择单个 HighCharts 容器会导致其他容器改变位置，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/32100571/

24 4 0
文章推荐： html - 对齐列表的跨度
文章推荐： c# - 序列化 c# 使用 switch 序列化自述文件
文章推荐： c# - 如何将错误消息显示为模态
文章推荐： c# - Selenium WebDriver - Chrome - C# - 无法以隐身模式启动 selenium 浏览器作为最大化浏览器
太空宇宙
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com