javascript - 如何在 Angular 图中制作像钟形曲线一样的条形？

Question

我正在使用 angular-chart 在我的网络应用程序中绘制图表。我想为图表中的条形图制作 UI，如图所示。我已经尝试了很多来实现这个 UI 但无法实现。我还为相同的 UI 搜索了其他库。我们可以在图表上绘制一条钟形曲线，但我想让每个条形看起来都像一条钟形曲线。 这是 angular-chart 的 JsFiddle。

这是我正在尝试执行的代码。

https://jsfiddle.net/quekid/untd28yq/

$scope.datasetOverride = [{ yAxisID: 'y-axis-1' }, { yAxisID: 'y-axis-2'   }];
$scope.options = {
scales: {
  yAxes: [
    {
      id: 'y-axis-1',
      type: 'linear',
      display: true,
      position: 'left',
      ticks: {
            beginAtZero:true,
            suggestedMin: 0
        }
    },
    {
      id: 'y-axis-2',
      type: 'linear',
      display: false,
      position: 'right'
    }
   ]
 }
};

Answer 1

请试试

 $scope.colors= [{ 
                                fill: true,
                 backgroundColor: "#cb2431"
              }]; 

这将填充图表下方的区域，这是我的工作。试试吧

jsfiddle