时间戳

首页 > 解决方案 > 如果选择了图例，如何显示比例值

angularjs - 如果选择了图例，如何显示比例值

问题描述

嗨，伙计们在角度图表中面临一个问题。我正在使用一个图表，即使用户选择所有图例，我也想在其中显示比例值。

未选择图例时 未选择图例时

选择图例时 选择图例时

这是 HTML：

<!DOCTYPE html>
<html ng-app="plunker">

<head>
  <link rel="stylesheet" href="style.css">
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
  <script data-require="chartjs@*" data-semver="2.2.1" src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.2.1/Chart.min.js"></script>
  <script type="text/javascript" src="https://cdn.jsdelivr.net/angular.chartjs/latest/angular-chart.min.js"></script>
  <script src="script.js"></script>
</head>

<body ng-controller="MainCtrl">
  <h1>Stacked Bar Chart</h1>

  <canvas class="chart chart-bar" chart-type="type" chart-data="data" chart-labels="labels" 
  chart-series="series" chart-options="options" chart-colors="colors">
  </canvas>
</body>

</html>

和 javascript

var app = angular.module('plunker', ['chart.js']);
app.controller("MainCtrl", function($scope) {

  $scope.labels = ["Jan", "Feb", "Mars", "Apr", "May", "Jun",
    "Jul","Aug","Sep","Oct","Nov","Dec"
  ];
  $scope.type = "bar";
  $scope.series = ['Series A', 'Series B'];
  $scope.options = {
    title: {
      display: true,
      text: "Chart.js Bar Chart - Stacked"
    },
    tooltips: {
      intersect: true
    },
    scales: {
      xAxes: [{
        barThickness: 15,
        categoryPercentage: 0.1,
        stacked: true,
        ticks: {
                autoSkip: false
              },
              scaleLabel: {
                display: true,
                labelString: "Process Area"
              },
              gridLines: {
                display: false
              }
      }],
      yAxes: [{
        stacked: true,
        categorySpacing: 0,
        display: true,
        maxBarThickness: 0,
        position: 'left',
              ticks: {
                beginAtZero: true
              },
              scaleLabel: {
                display: true,
                labelString: "# of Corrective Action"
              }
      }]
    },
        elements: {
          line: {
            fill: false
          }
        },
        legend: {
          display: true,
          position: 'bottom',
          labels: {
            boxWidth: 15
          }
        }
  };
  $scope.data = [
    [65, 59, 90, 81, 56, 55, 40,10,60,90,84,63],

    [28, 48, 40, 19, 96, 27, 100,50,40,90,31,70]
  ];
  $scope.colors = ['#00ADF9'];

});

Plunker 演示：http://plnkr.co/edit/OXpRBqngdimzxDp1t7Qh?p=preview 供参考

当没有选择图例时，我想显示相同的比例值。

标签： angularjschartschart.js

解决方案

推荐阅读