同一页面上的多个堆叠图表

Question

认为这很容易，但我遗漏了一些东西。尝试将两个堆叠的 100% 图表添加到同一页面。正在通过 php 从 MySQL 提供数据。我知道 php 代码是正确的，因为我能够在源代码中看到正确的数据。问题是，第二张图表没有显示。

我（我认为）已验证图表没有任何冲突的 ID。这是两个图表的代码：

图表 1（这一张按预期显示）：

<!-- Chart code -->
<script>
var ageChart = AmCharts.makeChart("agePie", {
    "type": "serial",
    "theme": "light",

    "dataProvider": [{
        "demographic": "National",
        "18to34": 30.14,
        "35to54": 40.14,
        "55to64": 13.40,
        "65over": 16.32

    },
    {
        "demographic": "Segment",
        "18to34": <?php echo $age1Avg ?>,
        "35to54": <?php echo $age2Avg ?>,
        "55to64": <?php echo $age3Avg ?>,
        "65over": <?php echo $age4Avg ?> 

    }

    ],
    "valueAxes": [{
        "stackType": "100%",
        "axisAlpha": 0,
        "gridAlpha": 0,
        "labelsEnabled": false,
        "position": "left"
    }],
    "graphs": [{
        "balloonText": "[[title]], [[category]]<br><span style='font-size:14px;'><b>[[value]]</b></span>",
        "fillAlphas": 0.9,
        "fontSize": 11,
        "labelText": "[[title]]: [[value]]%",
        "lineAlpha": 0.5,
        "title": "18-34",
        "type": "column",
        "valueField": "18to34"
    }, {
        "balloonText": "[[title]], [[category]]<br><span style='font-size:14px;'><b>[[value]]</b></span>",
        "fillAlphas": 0.9,
        "fontSize": 11,
        "labelText": "[[title]]: [[value]]%",
        "lineAlpha": 0.5,
        "title": "35-54",
        "type": "column",
        "valueField": "35to54"
    }, {
        "balloonText": "[[title]], [[category]]<br><span style='font-size:14px;'><b>[[value]]</b></span>",
        "fillAlphas": 0.9,
        "fontSize": 11,
        "labelText": "[[title]]: [[value]]%",
        "lineAlpha": 0.5,
        "title": "55-64",
        "type": "column",
        "valueField": "55to64"
    }, {
        "balloonText": "[[category]]:[[title]]<br><span style='font-size:14px;'><b>[[value]]</b></span>",
        "fillAlphas": 0.9,
        "fontSize": 11,
        "labelText": "[[title]]: [[value]]%",
        "lineAlpha": 0.5,
        "title": "Over 65",
        "type": "column",
        "valueField": "65over"
    }],
    "marginTop": 30,
    "marginRight": 0,
    "marginLeft": 0,
    "marginBottom": 40,
    "autoMargins": false,
    "categoryField": "demographic",
    "categoryAxis": {
        "gridPosition": "start",
        "axisAlpha": 0,
        "gridAlpha": 0
    }

});
</script>

图 2（不显示此图）。应该是相同的配置，只是不同的数据对比。

<script>
var ethChart = AmCharts.makeChart("ethPie", {
    "type": "serial",
    "theme": "light",

    "dataProvider": [{
        "demographic2": "National",
        "Causacian": 30.14,
        "AfricanAmerican": 40.14,
        "Latin": 13.40,
        "Other": 16.32

    },
    {
        "demographic2": "Segment",
        "Causacian": <?php echo $eth1Avg ?>,
        "AfricanAmerican": <?php echo $eth2Avg ?>,
        "Latin": <?php echo $eth3Avg ?>,
        "Other": <?php echo $eth4Avg ?> 

    }

    ],
    "valueAxes": [{
        "stackType": "100%",
        "axisAlpha": 0,
        "gridAlpha": 0,
        "labelsEnabled": false,
        "position": "left"
    }],
    "graphs": [{
        "balloonText": "[[title]], [[category]]<br><span style='font-size:14px;'><b>[[value]]</b></span>",
        "fillAlphas": 0.9,
        "fontSize": 11,
        "labelText": "[[title]]: [[value]]%",
        "lineAlpha": 0.5,
        "title": "Caucasian",
        "type": "column",
        "valueField": "Caucasian"
    }, {
        "balloonText": "[[title]], [[category]]<br><span style='font-size:14px;'><b>[[value]]</b></span>",
        "fillAlphas": 0.9,
        "fontSize": 11,
        "labelText": "[[title]]: [[value]]%",
        "lineAlpha": 0.5,
        "title": "African American",
        "type": "column",
        "valueField": "AfricanAmerican"
    }, {
        "balloonText": "[[title]], [[category]]<br><span style='font-size:14px;'><b>[[value]]</b></span>",
        "fillAlphas": 0.9,
        "fontSize": 11,
        "labelText": "[[title]]: [[value]]%",
        "lineAlpha": 0.5,
        "title": "Latin",
        "type": "column",
        "valueField": "Latin"
    }, {
        "balloonText": "[[category]]:[[title]]<br><span style='font-size:14px;'><b>[[value]]</b></span>",
        "fillAlphas": 0.9,
        "fontSize": 11,
        "labelText": "[[title]]: [[value]]%",
        "lineAlpha": 0.5,
        "title": "Other",
        "type": "column",
        "valueField": "Other"
    }],
    "marginTop": 30,
    "marginRight": 0,
    "marginLeft": 0,
    "marginBottom": 40,
    "autoMargins": false,
    "categoryField": "demographic2",
    "categoryAxis": {
        "gridPosition": "start",
        "axisAlpha": 0,
        "gridAlpha": 0
    }

});
</script>

通过各自的 ID 调用每个图表：

<div id="agePie"></div>
<div id="ethPie"></div>

在正确的方向上思考或推动？

Answer 1

请运行下面的代码段。您的代码正在运行，似乎缺少定义的维度会导致问题。

我建议您尝试为两个图表设置 CSS class，以防它们具有相同的维度。检查下面的例子：

.chartdiv {
  width: 100%;
  height: 300px;
}

将 class 添加到 DivElement:

<div id="agePie" class="chartdiv"></div>
<div id="ethPie" class="chartdiv"></div>

确保清理浏览器缓存。这可以解释为什么您之前没有看到差异。

var ageChart = AmCharts.makeChart("agePie", {
    "type": "serial",
    "theme": "light",

    "dataProvider": [{
        "demographic": "National",
        "18to34": 30.14,
        "35to54": 40.14,
        "55to64": 13.40,
        "65over": 16.32

    },
    {
        "demographic": "Segment",
        "18to34": 24,
        "35to54": 40,
        "55to64": 60,
        "65over": 80 

    }

    ],
    "valueAxes": [{
        "stackType": "100%",
        "axisAlpha": 0,
        "gridAlpha": 0,
        "labelsEnabled": false,
        "position": "left"
    }],
    "graphs": [{
        "balloonText": "[[title]], [[category]]<br><span style='font-size:14px;'><b>[[value]]</b></span>",
        "fillAlphas": 0.9,
        "fontSize": 11,
        "labelText": "[[title]]: [[value]]%",
        "lineAlpha": 0.5,
        "title": "18-34",
        "type": "column",
        "valueField": "18to34"
    }, {
        "balloonText": "[[title]], [[category]]<br><span style='font-size:14px;'><b>[[value]]</b></span>",
        "fillAlphas": 0.9,
        "fontSize": 11,
        "labelText": "[[title]]: [[value]]%",
        "lineAlpha": 0.5,
        "title": "35-54",
        "type": "column",
        "valueField": "35to54"
    }, {
        "balloonText": "[[title]], [[category]]<br><span style='font-size:14px;'><b>[[value]]</b></span>",
        "fillAlphas": 0.9,
        "fontSize": 11,
        "labelText": "[[title]]: [[value]]%",
        "lineAlpha": 0.5,
        "title": "55-64",
        "type": "column",
        "valueField": "55to64"
    }, {
        "balloonText": "[[category]]:[[title]]<br><span style='font-size:14px;'><b>[[value]]</b></span>",
        "fillAlphas": 0.9,
        "fontSize": 11,
        "labelText": "[[title]]: [[value]]%",
        "lineAlpha": 0.5,
        "title": "Over 65",
        "type": "column",
        "valueField": "65over"
    }],
    "marginTop": 30,
    "marginRight": 0,
    "marginLeft": 0,
    "marginBottom": 40,
    "autoMargins": false,
    "categoryField": "demographic",
    "categoryAxis": {
        "gridPosition": "start",
        "axisAlpha": 0,
        "gridAlpha": 0
    }

});


var ethChart = AmCharts.makeChart("ethPie", {
    "type": "serial",
    "theme": "light",

    "dataProvider": [{
        "demographic2": "National",
        "Causacian": 30.14,
        "AfricanAmerican": 40.14,
        "Latin": 13.40,
        "Other": 16.32

    },
    {
        "demographic2": "Segment",
        "Causacian": 23,
        "AfricanAmerican": 34,
        "Latin": 12,
        "Other": 3 

    }

    ],
    "valueAxes": [{
        "stackType": "100%",
        "axisAlpha": 0,
        "gridAlpha": 0,
        "labelsEnabled": false,
        "position": "left"
    }],
    "graphs": [{
        "balloonText": "[[title]], [[category]]<br><span style='font-size:14px;'><b>[[value]]</b></span>",
        "fillAlphas": 0.9,
        "fontSize": 11,
        "labelText": "[[title]]: [[value]]%",
        "lineAlpha": 0.5,
        "title": "Caucasian",
        "type": "column",
        "valueField": "Caucasian"
    }, {
        "balloonText": "[[title]], [[category]]<br><span style='font-size:14px;'><b>[[value]]</b></span>",
        "fillAlphas": 0.9,
        "fontSize": 11,
        "labelText": "[[title]]: [[value]]%",
        "lineAlpha": 0.5,
        "title": "African American",
        "type": "column",
        "valueField": "AfricanAmerican"
    }, {
        "balloonText": "[[title]], [[category]]<br><span style='font-size:14px;'><b>[[value]]</b></span>",
        "fillAlphas": 0.9,
        "fontSize": 11,
        "labelText": "[[title]]: [[value]]%",
        "lineAlpha": 0.5,
        "title": "Latin",
        "type": "column",
        "valueField": "Latin"
    }, {
        "balloonText": "[[category]]:[[title]]<br><span style='font-size:14px;'><b>[[value]]</b></span>",
        "fillAlphas": 0.9,
        "fontSize": 11,
        "labelText": "[[title]]: [[value]]%",
        "lineAlpha": 0.5,
        "title": "Other",
        "type": "column",
        "valueField": "Other"
    }],
    "marginTop": 30,
    "marginRight": 0,
    "marginLeft": 0,
    "marginBottom": 40,
    "autoMargins": false,
    "categoryField": "demographic2",
    "categoryAxis": {
        "gridPosition": "start",
        "axisAlpha": 0,
        "gridAlpha": 0
    }

});

.chartdiv {
  width: 100%;
  height: 300px;
}

<script src="https://www.amcharts.com/lib/3/amcharts.js"></script>
<script src="https://www.amcharts.com/lib/3/serial.js"></script>
<script src="https://www.amcharts.com/lib/3/plugins/export/export.min.js"></script>
<link rel="stylesheet" href="https://www.amcharts.com/lib/3/plugins/export/export.css" type="text/css" media="all" />
<script src="https://www.amcharts.com/lib/3/themes/light.js"></script>

<div id="agePie" class="chartdiv"></div>
<div id="ethPie" class="chartdiv"></div>

同一页面上的多个堆叠图表

Multiple stacked charts on same page

amcharts