jquery - 在 Angularjs Chartjs 中的条之间添加空格

Question

我正在使用 Angularjs Chartjs https://jtblin.github.io/angular-chart.js/，

JS代码

$scope.options = {
    cornerRadius: 20,
    scales: {
        yAxes: [{
                gridLines: {
                    display: false
                }
            }],
        xAxes: [{
                stacked: false,
                barThickness: 11,
                barPercentage: 2.0,
                gridLines: {
                    display: false
                },
                ticks: {
                    minRotation: 20
                }
            }
        ]
    }
};
$scope.labels = ['2006', '2007', '2008', '2009', '2010', '2011', '2012'];
$scope.series = ['Series A', 'Series B', 'Series C'];

$scope.data = [
    [65, 59, 80, 81, 56, 55, 40],
    [28, 48, 40, 19, 86, 27, 90],
    [30, 80, 19, 86, 40, 56, 90]
];

在 HTML 中

<div class="row">
            <div class="col-md-12">
                <canvas id="bar" class="chart chart-bar" chart-data="data" 
                        chart-labels="labels" chart-series="series" chart-options="options"
                        chart-dataset-override="colors">
                </canvas>
            </div>
        </div>

现在我想在栏之间留出空间并制作 3 种固定颜色以及栏两侧的边框半径。我无法添加图像。感谢您的宝贵时间。

Answer 1

尝试使用.setOptions条形的全局颜色和条形xAxes.barThickness间距。

var app = angular.module('app', ['chart.js', 'ngRoute']);

app.config(function ($routeProvider, ChartJsProvider) {
  $routeProvider.when('/', {
    templateUrl: 'bars.html',
    controller: 'MainCtrl',
  });
  ChartJsProvider.setOptions({
    chartColors: ['#ff0000', '#00ff00', '#0000ff'],
  });
});

app.controller('MainCtrl', function ($scope) {
  $scope.options = {
    cornerRadius: 20,
    scales: {
      yAxes: [
        {
          gridLines: {
            display: false,
          },
        },
      ],
      xAxes: [
        {
          stacked: false,
          barThickness: 20,
          borderWidth:10,
          barPercentage: 2.0,
          gridLines: {
            display: false,
          },
          ticks: {
            minRotation: 20,
          },
        },
      ],
    },
  };
  $scope.labels = ['2006', '2007', '2008', '2009', '2010', '2011', '2012'];
  $scope.series = ['Series A', 'Series B', 'Series C'];

  $scope.data = [
    [65, 59, 80, 81, 56, 55, 40],
    [28, 48, 40, 19, 86, 27, 90],
    [30, 80, 19, 86, 40, 56, 90],
  ];
});