AmChart 未出现在 md 对话框中答案

【问题标题】：AmChart not appearing in md-dialogAmChart 未出现在 md 对话框中
【发布时间】：2018-07-31 23:23:39
【问题描述】：

我有一个想要出现在 md 对话框中的 AmChart。它传递了一个 JSON 数据提供者，但什么也没有出现。

dialog.tmpl.html：

    <md-dialog aria-label="Project Zone Chart">
        <md-toolbar>
            <div class="md-toolbar-tools">
                <h2>Project Zone Chart</h2>
                <span flex></span>
                <md-button class="md-icon-button" ng-click="closeDialog()">
                    <md-icon aria-label="Close dialog">close</md-icon>
                </md-button>
            </div>
        </md-toolbar>
        <md-dialog-content>
                <p><div id="projZoneChart" style="width: 100%; height: auto;"></div></p>
        </md-dialog-content>
</md-dialog>

controller.js：

 var projZoneChartOps = {
        type: "serial",
        valueAxes: [{
            minorGridAlpha: 0.08,
            minorGridEnabled: true,
            position: "top",
            gridAlpha: 0,
            precision: 0
        }],
        startDuration: 1,
        graphs: [{
            type: "column",
            fillAlphas: 1,
            lineAlpha: 0,
            valueField: "value",
            colorField: "color",
            lineAlpha: 0
        }],
        rotate: true,
        categoryField: "metric",
        categoryAxis: {
            gridPosition: "start",
            parseDates: false,
            gridAlpha: 0
        }
    };


createChart($scope.chartdata, projZoneChartOps);
function createChart(chartData, chartOps){
$scope.projZoneChart = AmCharts.makeChart("projZoneChart", chartOps);
$scope.projZoneChart.dataProvider = chartData;

但是，对话框中根本没有出现任何内容。我的 chartOps 有问题吗？

注意：chartData 变量是一个 JSON 对象，有两个字段，startOfWeek（假设为 x 轴）和 metric（假设为 y 轴）

【问题讨论】：

标签： amcharts angularjs-material

【解决方案1】：

有几个问题/cmets：

1) 为什么在调用 makeChart 之前不将数据分配给 chartOps 对象？

chartOps.dataProvider = chartData;
$scope.projZoneChart = AmCharts.makeChart("projZoneChart", chartOps);

这实际上会使图表从您的数据开始。您这样做的方式将要求您在手动设置 dataProvider 后在图表对象上调用 validateData()，与将其直接包含在 makeChart 中相比，这是不必要的开销。

$scope.projZoneChart = AmCharts.makeChart("projZoneChart", chartOps);
$scope.projZoneChart.dataProvider = chartData; 
$scope.projZoneChart.validateData(); //required if you're doing it this way but unneccessary overhead compared to simply including it inside of makeChart directly as you're essentially remaking the chart after you create it for the sake of rendering your data.

2) 确保您的 *field 属性匹配。 startOfWeek 根本没有在您的图表配置中提及，即使您说它在您的 JSON 数据中。您的 valueField 设置为 "value" - 您可能希望将其设置为 "startOfWeek" ，除非您在其他地方修改您的 JSON 对象。

3) 在模态或其他动态/隐藏元素中显示图表通常需要您在包含图表的模态/选项卡/等可见时调用图表对象的invalidateSize 方法，以便正确呈现。在调用 $scope.projZoneChart.invalidateSize() 之前，您需要检查 md-dialog 提供的任何事件以确定何时可见。

【讨论】：