Angular JS 中的条形图使用 Chartjs答案

【问题标题】：Bar Chart in Angular JS Using ChartjsAngular JS 中的条形图使用 Chartjs
【发布时间】：2021-08-11 06:40:22
【问题描述】：

我正在我的 AngularJS 应用程序中使用 Chartjs 制作条形图。我可以渲染图表，但是，我无法找到一种方法来显示每个条形图的值。我找到的解决方案是针对 Angular 应用程序而不是针对 AngularJs 应用程序的。

这是我的画布标签：

我的JS文件代码：

     $scope.labels = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'June', 'July'];
    $scope.data = [[75, 63, 59, 79, 13, 91, 113]];
    $scope.ColorBar = ['#90EE90', '#FF6600'];
    $scope.DataSetOverride = [{ yAxisID: 'y-axis-1' }];
    $scope.options = {
        legend: { display: true },
        responsive: true, 
        scales: {
            yAxes: [
                {
                    id: 'y-axis-1',
                    type: 'linear',
                    display: true,
                    position: 'left'
                }]
             }
           }

【问题讨论】：

您在寻找chartjs-plugin-datalabels吗？
@Jesper 我确实遇到了这个插件，但这是唯一可用的选项吗？或者还有其他方法吗？

标签： angularjs chart.js bar-chart

【解决方案1】：

对于这种类型的功能，您应该使用chartjs-plugin-datalabels，它正是这样做的。

这样的事情应该可以解决你的问题：

options: {
  plugins: {
    datalabels: {
      color: 'blue',
      labels: {          
        value: {
          color: 'green'
        }
      }
    }
  }
}

文档非常好。你应该在那里找到你需要的一切。

【讨论】：

感谢您的回复！我确实遇到了这个选项，但我想知道是否还有其他方法可以做到这一点？一个原因是在文档中提到了 - '此插件不提供任何公共 API（插件选项除外），因此您不应访问以 $ 或 _ 开头的私有属性或方法，包括 $datalabels 附加属性。该实现可以在任何版本中更改，并且如果您的任何代码依赖它，则可能会在即将发布的次要/补丁版本中中断您的生产构建，恕不另行通知。'
我没有尝试过@LeeLenalee 解决方案，但看起来这就是您要寻找的。span>

【解决方案2】：

如果您不想使用 datalabels 插件，您可以编写自己的基本版本作为内联插件，如下所示：

const customDatalabalesPlugin = {
  id: 'customDatalabels',
  afterDatasetsDraw: (chart, args, opts) => {
    const {
      ctx,
      _metasets
    } = chart;
    const lineHeight = ctx.measureText('M').width;
    const color = opts.color || 'black';

    for (let i = 0; i < chart.data.datasets.length; i++) {
      const meta = chart.getDatasetMeta(i)
      meta.data.forEach((el) => {
        //console.log(el)
        const dpVal = el._chart.data.datasets[el._datasetIndex].data[el._index];
        const text = dpVal.toString();
        const textWidth = ctx.measureText(text).width;

        ctx.fillStyle = color;
        ctx.fillText(text, (el._model.x - textWidth / 2), (el._model.y - lineHeight));
      });
    }
  }
}

const options = {
  type: 'bar',
  data: {
    labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
    datasets: [{
      label: '# of Votes',
      data: [12.4, 19.234, 3.23213, 5.4, 2, 3],
      borderColor: 'pink'
    }]
  },
  options: {
    plugins: {
      customDatalabels: {
        color: 'green', // Color each character individual collor
        // color: 'pink' // Color whole label this collor
      }
    }
  },
  plugins: [customDatalabalesPlugin]
}

const ctx = document.getElementById('chartJSContainer').getContext('2d');
new Chart(ctx, options);

<body>
  <canvas id="chartJSContainer" width="600" height="400"></canvas>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.js"></script>
</body>

关于在插件中使用私有变量，可以省心，因为chart.js不会再发布版本2，所以它们不会再改变了。

【讨论】：