删除Angularjs-Chart边框并减少图表圆弧厚度

Dav*_*eye 3 angularjs chart.js

如何删除Angularjs甜甜圈图的边界线并减小圆弧的粗细。

的HTML

            <canvas id="doughnut" class="chart chart-doughnut" chart-colors="preColors" chart-dataset-override="datasetOverridePres" chart-dataset-options="preLegend" chart-data="preData" chart-labels="preName">
            </canvas>
Run Code Online (Sandbox Code Playgroud)

JS

    $scope.preColors = ['#febe05','#f3f3f3'];
    $scope.preData = [343,78];
Run Code Online (Sandbox Code Playgroud)

谢谢

Ken*_*eno 6

我对您的代码做了一些更改(我认为chart-dataset-options是错误的):

        <canvas id="doughnut" class="chart chart-doughnut" 
        chart-colors="preColors" 
        chart-options="preLegend" 
        chart-data="preData" 
        chart-labels="preName" 
        chart-dataset-override="preOverride">
        </canvas>
Run Code Online (Sandbox Code Playgroud)

和JS:

    $scope.preColors = ['#febe05', '#f3f3f3'];
    $scope.preData = [343, 78];
    $scope.preName = ['a', 'b'];

    $scope.preLegend = { 
      cutoutPercentage: 80, //arc thickness
      elements: {
        arc: {
          borderWidth: 0 // border line
        }
      }
    }
    $scope.preOverride = [{}];
Run Code Online (Sandbox Code Playgroud)

结果:

在此处输入图片说明

现场演示:SkinnyDoughnout

  • 两千个吻在你的脸颊上 (2认同)