Question

我有一个要显示在md对话框中的AmChart。它传递了一个JSON dataProvider，但什么也没出现。

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轴）

Answer 1

有一些问题/评论：

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方法，以使其能够正确呈现。您需要检查md-dialog提供的任何事件，以确定在调用$scope.projZoneChart.invalidateSize()之前它何时可见。

AmChart未出现在md对话框中

1 个答案: