angularjs - AngularJS Kendo 图表未使用完整的屏幕空间

Question

我在我的项目中使用了 AngularJS、KendoCharts 和 Bootstrap。我使用了导航选项卡并在我的屏幕上添加了三个选项卡，显示三个不同的剑道图表。一切运行良好，但我面临一个问题。当我单击第二个选项卡时，剑道图表不会显示在整个屏幕上，但是如果我在屏幕上添加一个刷新图表的按钮，那么它可以正常工作并占据整个空间。但是为什么这在第一次显示时没有占据整个空间。我尝试了各种解决方案/解决方法，但没有一个符合我的标准。

-- 我在图表的图表区域中添加了宽度，这很有效，但它扰乱了图表的响应能力。

- 在角度控制器/服务中创建图表后，我尝试在图表上刷新/重绘，但这也失败了，并给出了图表 id 未定义的错误。

以角度创建图表后，如何刷新/重绘图表。我不想要 html 中的任何代码，它应该出现在 angular 文件中。或者可以通过其他任何方式解决此问题。

Answer 1

您可以使用引导网格系统。在您的 HTML 中，创建一行，然后创建一个跨度为 12 的列。在该列中放置您的图表。例如：

<div class="row">
    <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
        <!-- your chart goes here -->
    </div>
</div>

它应该工作。

Answer 2

如何使剑道图表在移动设备上响应？

我做了小指令：

app.directive("chartAligner", function ($window) {
    return function (scope, element) {
        var _kChart;

        angular.element($window).bind('resize', function () {
            if (_kChart) {
                _kChart.resize();
            } else {
                _kChart = element.getKendoChart()
            }
        });
    };
});