Question

我第一次使用C3图表并遇到了名为angular_c3_simple的angular指令。 https://github.com/wasilak/angular-c3-simple

我尝试使用静态数据并且一切正常但是通过服务使用JSON数据它没有按预期工作。

我正在尝试显示2个不同的图形，但它正确显示第一个图形，但对于第二个图形，它显示未定义的值。

请帮我解决这个问题，不确定我在哪里。

这是我的傻瓜：https://plnkr.co/edit/NYxGjWGRzj4XVzc5XjpG?p=preview

<div class="row">
  <c3-simple id="chart" config="chart"></c3-simple>
</div>
<div class="row">
  <c3-simple id="chart1" config="chart1"></c3-simple>
</div>

Answer 1

我认为您错过了配置中的bindto选项，因此，图表未正确显示。

Example

app.controller('analyticsController', function($scope, analyticsService, c3SimpleService, $http, $q) {
  console.log("I have entered here");
  var chart_size = {    width: 480, height: 280 };
  var chart_legend = {position: 'bottom'};
  $scope.chart = {};
  $scope.chart1 = {};
  analyticsService.getCounts()
    .then(function (dataattr){
      $scope.chart= {
                data: {
                columns: [
                    ['Production', dataattr.data.meta_charts_wl.wl_in_production],
                    ['Experimental', dataattr.data.meta_charts_wl.wl_in_experimental],
                    ],
                    type : 'donut',
                    colors: {
                    Production: '#1E91CF',
                    Experimental: '#FBA6A6',
                },
                },
                donut: {
                    title: "Area details:",
                    },
                size: chart_size,
                legend: chart_legend,
                bindto: "#chart"
        };
        $scope.chart1= {
                data: {
                columns: [
                    ['Production_1', dataattr.data.meta_charts_wl.wl_policymatched],
                    ['Experimental_1', dataattr.data.meta_charts_wl.wl_policy_not_matched],
                    ],
                    type : 'donut',
                    colors: {
                    Production_1: '#1E91CF',
                    Experimental_1: '#FBA6A6',
                },
                },
                donut: {
                    title: "Area details:",
                    },
                size: chart_size,
                legend: chart_legend,
                bindto: "#chart1"
        };
    })      
});

用于C3图表的AngularJS指令不显示所有图形

1 个答案: