jquery - 使用 Am 图表隐藏/显示和调整问题大小

Question

我在使用名为 AmCharts 的 jQuery 插件时遇到问题。我遇到的问题是我希望它在网站加载时隐藏，但当单击按钮时应该显示它。我的 jQuery 已正确设置，但是单击按钮时图表不会出现。首先。一旦您单击该按钮，然后调整窗口大小，图表就会神奇地出现并保留下来。所以这似乎是某种错误，但我对 jQuery 还不够熟练，还不能确定。这是 jQuery 代码:

$("#button").show();
$("#chartdiv").hide();

$("#button").click(function(){
    $("#chartdiv").toggle();
});

var chart = AmCharts.makeChart("chartdiv", {
        "type": "pie",
        "theme": "none",
        "startEffect": "easeOutSine",
        "legend": {
            "markerType": "circle",
            "position": "bottom",
            "marginRight": 0,
            "autoMargins": false
        },
        labelsEnabled: false,
        "dataProvider": [{
            "pictures": "Stock",
            "total": 256.9
        }, {
            "pictures": "3rd Party",
            "total": 131.1
        }, {
            "pictures": "360 Spin",
            "total": 115.8
        }, {
            "pictures": "360 Detail",
            "total": 109.9
        }, {
            "pictures": "No Content",
            "total": 132
        }],
        "valueField": "total",
        "titleField": "pictures",
        "balloonText": "[[title]]<br><span style='font-size:14px'><b>[[value]]</b> ([[percents]]%)</span>",
        "exportConfig": {
            "menuTop": "0px",
            "menuItems": [{
                "icon": '/lib/3/images/export.png',
                "format": 'png'
            }]
        }
    });

这是一个working fiddle看看我在说什么。任何帮助将不胜感激!

Answer 1

如果隐藏，AmCharts 不知道如何测量其大小。

您必须告诉它显式更新大小:

chart.handleResize();

答案取自这里: https://stackoverflow.com/a/22070739/478440

这是一个更新且有效的 fiddle :http://jsfiddle.net/N3fpz/1/

尽管如此，正如其他回复之一所说，这不是一个完整的解决方案，并且可能会给您带来其他问题，例如边距或轴。