时间戳

首页 > 解决方案 > 来自数组的图表js自定义数据标签

javascript - 来自数组的图表js自定义数据标签

问题描述

我想将计算数组中的数据标签放在每一列的顶部。我的数组中的值表示每个条形图填充了另一种颜色。我做了一个以百分比计算这些值的函数。任何提示在 datalabels 格式化程序部分放什么？

在此处输入图像描述

var data1 = ['7.8', '5', '', '', '7.7', '7.8', '8.1', '7.8'];
var data2 = ['8', '8', '', '', '8', '8', '8', '8'];
var percentage = [];

function calculate() {
  for (let i = 0; i < 8; i++) {
    percentage.push(data1[i] / data2[i] * 100)
  }
}

calculate();
var canvas = document.getElementById('myChart');
var data = {
  labels: ['1','2','3','4','5','6','7','8'],
  datasets: [{
    //   xAxisID: "bar-x-axis2",
    data: data1,
    backgroundColor: ['#c3cd46', '#e31c24', '#FFFFFF', '#FFFFFF', '#c3cd46', '#267533', '#267533', '#267533'],
    datalabels: {
      display: false,
    },
  }, {
    data: data2,
    //  xAxisID: "bar-x-axis1",
    datalabels: {
      display: false,
    },
    backgroundColor: ['rgba(61, 146, 125, 1)', 'rgba(61, 146, 125, 1)', 'rgba(61, 146, 125, 1)', 'rgba(61, 146, 125, 1)', 'rgba(61, 146, 125, 1)', 'rgba(61, 146, 125, 1)', 'rgba(61, 146, 125, 1)', 'rgba(61, 146, 125, 1)'],
  }, {
    data: ['', '', '', '', '', '', '', '']
  }]
};
var option = {
  legend: {
    display: false,
  },
  tooltips: {
    enabled: false,
  },
  scales: {
    yAxes: [{
      scaleFontSize: 40,
      scaleLabel: {
        display: true,
      },
      ticks: {
        max: 10,
        min: 0,
        stepSize: 2,
        beginAtZero: true,
        callback: function(value) {
          return value + " h"
        }
      },
    }],
    xAxes: [{
      barThickness: 15,
      stacked: true,      
    }],
  },
  plugins: {
    datalabels: {
      anchor: 'end',
      align: 'top', 
      formatter: function(context) {

      },      
    }
  }
};

var myBarChart = Chart.Bar(canvas, {
  data: data,
  options: option
});

https://jsfiddle.net/L3rb10md/76/

标签： javascriptchart.js

解决方案

您离解决方案如此之近。

所以首先你不需要那个var percentage，我们会改变你function calculate的一点，并最终确定它plugin...formatter。

如果您想跳过所有这些 JSFiddle 以获取整个更改的代码。

基本上，格式化程序可以为您提供当前对象，其中将包括dataIndex我们可以在计算函数上使用的对象，而不是每次都循环所有数据集。

function calculate(i){
    return (data1[i] / data2[i] * 100)
}

注意：参数“ i ”将从格式化程序 ( chart_obj.dataIndex) 传递。

格式化程序看起来像这样，注意第二个参数chart_obj

formatter: function(context, chart_obj) {
    return calculate(chart_obj.dataIndex); //pass the current data index to calculate
}

最后我们需要设置第二个 datalabels.display = true

more above ...
data: data2,
//  xAxisID: "bar-x-axis1",
datalabels: {
  display: true,
}
... more bellow

希望这会有所帮助！

良好的编码

编辑

使用plugin option更改所有标签的数据，在这种情况下，我formatter直接将dataset

{
data: data2,
//  xAxisID: "bar-x-axis1",
datalabels: {
  display: true,
  formatter: function(context, chart_obj) {
    return calculate(chart_obj.dataIndex)
  },
}

推荐阅读