Как изменить форму легенды в Google-чартах?

Question

Как изменить форму легенды в Google-чартах?

0

Я новичок в angularjs и гугл-диаграммах. Я хочу сделать квадратную форму легенды для круговых диаграмм по умолчанию это круг. Вот мой код: вот мой код в Index.HTML:

 <head>
   <script src="http://code.angularjs.org/1.2.10/angular.js"></script>
   <script src="script.js"></script>
   <script src="http://bouil.github.io/angular-google-chart/ng-google-chart.js"></script>
 </head>

 <body ng-controller="MainCtrl">
   <div style="padding-left:100px">
        my pig pie chart</div>
 <div google-chart chart="chart" style="width:400,height:300"></div>
 </body>

script.js:

    var app = angular.module('myApp', [ 'googlechart' ]);

     app.controller('MainCtrl', function($scope) {
      var chart1 = {};
      chart1.type = "PieChart";
      chart1.data = [
       ['Component', 'cost'],
       ['Software hardware and electrice', 50000],
       ['Hardware', 80000]
  ];
       chart1.data.push(['Services',20000]);
        chart1.options = {
       'legend':'right',
        'width':400,
        'height':300
   };
  chart1.formatters = {
      number : [{
      columnNum: 1,
      pattern: "$ #,##0.00"
    }]
  };

   $scope.chart = chart1;

     $scope.aa=1*$scope.chart.data[1][1];
    $scope.bb=1*$scope.chart.data[2][1];
    $scope.cc=1*$scope.chart.data[3][1];
});

Любое предложение направляет меня, как я могу это сделать. Спасибо

Hassan 20 авг. 2015, в 10:31

Источник

Теги:

angularjs

pie-chart

google-visualization

2 ответа

0

В моем случае я напечатал круговую диаграмму без легенд, используя chartArea. Я создал диаграмму в половине контейнера и выровнял ее по левому краю, а затем с помощью HTML и ng. Поскольку я печатал данные, используя те же цвета из диаграммы, мои пользовательские легенды не работают с диаграммой, но выглядят здорово.

Надеюсь, это поможет вам!

Nestor Renato Guerrero Arriola 02 апр. 2019, в 20:57

Ещё вопросы

nbering · Accepted Answer · 2015-08-20T16-25-00.000Z

Для этого нет документального варианта. Круговые диаграммы отображаются как SVG, а маленький круг - это <circle>, поэтому вы не можете сделать это с помощью CSS.

МОЖЕТ быть возможным сделать это с помощью DOM-манипуляции в JQuery или что-то в этом роде, но поскольку API-интерфейсы google не отображают элементы диаграммы с классами или идентификатором ни на чем, то, что вы придумали, будет очень хрупким и может быть легко сломано изменения API диаграмм или самого графика.

По моему мнению, это подпадает под категорию "Вещи, которые были бы хороши, но не стоили усилий".