Question

我构建了一个图表，其中在给定的日期范围内计算特定项目的用户总工时。我不知道如何为特定的条形图自定义总价值计算逻辑，即：y轴的最大值和最小值是在给定数据集上自动计算的，因为我没有使用类型时间作为y轴，所以无法正确显示时间。我之所以不使用时间格式，是因为y轴表示总时间，该时间可能超过24小时，并且数据集数据没有日期，只有时间。

我已经尝试过使用y轴的时间格式，但是它需要time（）作为时间，我不能使用矩，因为我只有HH：mm格式的时间值，而没有日期。因此，数据集的数据值不包含任何在rails侧计算的十进制大于0.59的值。

    var dates = setStackedChartDates();
    var myStackChart = new Chart(stackChart, {
      type: 'bar',
      data: {
        labels: dates,
        datasets: setStackedDataSet()
      },
      options: {
        animation: {
          duration: 10,
        },
        scales: {
          xAxes: [{
            stacked: true,
            gridLines: { display: false },
            ticks: {
              autoSkip: false,
              callback: function(value) {
                if (gon.chart_project_group == "Date") {
                  return String(moment(value[0]).format("YYYY-MM-DD"));
                } else if (gon.chart_project_group == "Week") {
                  return String(moment(value[0]).format("DD MMM, YYYY")) + "   " + String(moment(value[1]).format("DD MMM, YYYY"));
                } else if (gon.chart_project_group == "Month") {
                  return String(moment(value[0]).format("MMM, YYYY"));
                } else {
                  return String(moment(value[0]).year());
                }
              }
            }
          }],
          yAxes: [{
            scaleLabel: {
              display: true,
              labelString: 'Time  (HH:mm)'
            },
            stacked: true,
            ticks: {
                callback: function(value) {
                    return value.toString().replace('.', '') + ":00";
                }
            }
          }],
        },
        legend: {display: true},
        tooltips: {
          filter: function(tooltipItem) {
            return tooltipItem['yLabel'] != 0;
          },
          callbacks: {
            label: function(tooltipItem, data){
              return data['datasets'][tooltipItem['datasetIndex']]['label'] + ": " + String(tooltipItem['yLabel']).replace('.', ':');
            }
          }
        }
      }
    });

    function setStackedDataSet(){
      var dataSetArray = [];
      gon.chart_project_users.forEach(buildDataSet);
      function buildDataSet(value, index, array){
        var dataSetHashForEachName = {};
        dataSetHashForEachName["label"] = value;
        dataSetHashForEachName["data"] = setDataForEachUser(index);
        dataSetHashForEachName["backgroundColor"] = gon.chart_project_user_background_color[index];
        dataSetHashForEachName["borderWidth"] = 2;
        dataSetArray.push(dataSetHashForEachName);
      }
      return dataSetArray;
    }

    function setDataForEachUser(indexUser){
      var userData = [];
      gon.chart_project_times.slice(0, setStackedChartDates().length).forEach(buildData);
      function buildData(value, index, array){
        userData.push(parseFloat(value[indexUser].replace(':', '.')));
      }
      return userData;
    }

假设一个特定的堆叠图表列包含5.31和6.32的两个数据，则预期结果为12.03，但当前将其视为普通十进制，输出为11.63。因此，它没有正确映射到y轴。我想在Chart JS使用该值绘制图表之前更改总值，例如，在上面的示例中，我想在Chart JS使用该值之前将11.63转换为12.03

在Chart js使用总价值绘制图表之前，如何自定义Chart JS堆积条形图中的总价值计算？

0 个答案: