文章/答案/技术大牛

发布

社区首页 >问答首页 >角材料绘制c3图

问角材料绘制c3图
EN

Stack Overflow用户

提问于 2015-11-16 15:02:54

回答 1查看 1.2K关注 0票数 1

我在显示角材料元素和C3.js图表方面有一些问题。

随着新版本的角度材料，在小部件出现滚动条。

有人知道怎么禁用它吗？我想展示具有固定大小的小部件。请看一下柱塞。

第二个问题是与C3图相关联。在浏览器中打开应用程序(柱塞处也是如此)并打开图表显示的对话框之后。然后我关闭对话框，再次打开，图表被打破。

造成这个问题的原因是什么？我在我的项目中使用了很多库(ngAnimate、ngAria、ngCookies、ngResource、ngTouch、ui.router、ngMaterial、ngMdIcons、ui.grid、ui.grid.selection、ui.grid.cellNav、ui.grid.pagination、ui.grid.resizeColumns、传单指令、引导程序、jQuery、c3、d3)。我是否需要注意它们被包括在内的顺序？

以下是C3图表的控制器(数据来自外部源- DB)：

angular.module('app')
.controller('ChartCtrl', ['$scope', '$stateParams',
    function ($scope, $stateParams) {

    $scope.param = $stateParams.param_1;

    d3.json('/chart1/'+$stateParams.param_1, function(err, data){
        if(err){ throw err; }
        $scope.data = data;
        //console.log(data);
        $scope.$apply();

        $scope.chart = c3.generate({
            bindto: '#chart1',
           /*size: {
                height: 350
            },*/
            data: {
                json: $scope.data,
                //columns: $scope.data,
                keys: {
                    value: ['data1', 'data2'],
                },
                type: 'bar'
             },
            bar: {
                width: {
                    ratio: 0.4 // this makes bar width 50% of length between ticks
                }
            },
            grid: {
                x: {
                    show: true
                },
                y: {
                    show: true
                }
            }
        });
    });
}]);

以及包含在面板-小部件指令中的html模板：

<div id="chart1" ng-controller="ChartCtrl">
    <div id="chart1"></div>
</div>

angular-material

c3.js

json

angularjs

d3.js

回答 1

Stack Overflow用户

回答已采纳

发布于 2015-11-17 01:36:41

您可以这样做，以修复表1中显示的图形的大小。

在侧Tab1中，制作一个固定大小和高度的SVG，如下所示：

<div id="tab1" ng-controller="GraphCtrl">
    <svg id="chart1" width="100" height="100"></svg>
</div>

将SVG绑定到图中，如下所示：

$scope.chart_grid_lines = c3.generate({
    bindto: d3.select('#chart1'), //binding to svg
    data: {
      columns: [
        ['data1', 30, 200, 100, 400, 150, 250],
        ['data2', 50, 20, 10, 40, 15, 25]
      ],
      type: 'spline'
    },
    legend: {
      show: false
    }
  });

工作代码这里

希望这能有所帮助！

票数 1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/33738402

复制

相似问题

问角材料绘制c3图
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问角材料绘制c3图EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问角材料绘制c3图
EN