Question

我使用的是chart.js 2.5而且我没有看到更改图例的选项更多的是我的数据值。

在图例高度中的示例值是6，因为我的日期值是6.我知道它有选项“max”但我不想手动使用，因为我的脚本是生成的。如何在我的图表上自动添加范围图例。

Chart.plugins.register({
  afterDatasetsDraw: function(chartInstance, easing) {
      // To only draw at the end of animation, check for easing === 1
      var ctx = chartInstance.chart.ctx;

      chartInstance.data.datasets.forEach(function (dataset, i) {
          var meta = chartInstance.getDatasetMeta(i);
          if (!meta.hidden) {
              meta.data.forEach(function(element, index) {
                  if(dataset.data[index] !== undefined) {
                      // Draw the text in black, with the specified font
                      ctx.fillStyle = 'rgb(0, 0, 0)';

                      var fontSize = 8;
                      var fontStyle = 'normal';
                      var fontFamily = 'Helvetica Neue';
                      ctx.font = Chart.helpers.fontString(fontSize, fontStyle, fontFamily);

                      // Just naively convert to string for now
                      var dataString = dataset.data[index].toString();

                      // Make sure alignment settings are correct
                      ctx.textAlign = 'center';
                      ctx.textBaseline = 'middle';

                      var padding = 5;
                      var position = element.tooltipPosition();
                      ctx.fillText(dataString, position.x, position.y - (fontSize / 2) - padding);
                  }
              });
          }
      });
  }
});
var barChartData = {
  labels: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"],
  datasets: [{
      label: "UC:NC ratio",
      type:'line',
      data: [6,6,6,6,6,6,6,6,0,0,0,0],
      fill: false,
      borderColor: '#0279cb',
      backgroundColor: '#0279cb',
      pointBorderColor: '#0279cb',
      pointBackgroundColor: '#0279cb',
      borderDash: [20, 30],
      yAxisID: 'y-axis-1'
  },
  {
      label: "UC:NC ratio YTD",
      type:'line',
      data: [6,6,6,6,6,6,6,6,0,0,0,0],
      fill: false,
      borderColor: '#000000',
      backgroundColor: '#000000',
      pointBorderColor: '#000000',
      pointBackgroundColor: '#000000',
      yAxisID: 'y-axis-1'
  }]
};

window.onload = function() {
  var ctx = document.getElementById("canvas").getContext("2d");
  window.myBar = new Chart(ctx, {
      showTooltips: false,
      type: 'bar',
      data: barChartData,
      animation: false,
      options: {
          responsive: true,
          legend: {
              display: true,
              position: 'bottom'
          },
          tooltips: false,
          elements: {
              line: {
                  fill: false
              }
          },
          scales: {
              xAxes: [{
                  display: true,
                  gridLines: {
                      display: false
                  },
                  labels: {
                      show: true,
                  }
              }],
              yAxes: [{
                  type: "linear",
                  display: true,
                  stacked: false,
                  position: "left",
                  id: "y-axis-1",
                  gridLines:{
                      display: false
                  },
                  labels: {
                      show:true,

                  }
              }]
          }
      }
  });
};

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <script data-require="jquery" data-semver="2.1.4" src="https://code.jquery.com/jquery-2.1.4.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.min.js"></script>
</head>
<body style="background:#FFF;">
    <div  style="width:700px;">
        <canvas id="canvas"></canvas>
    </div>
</body>
</html>

Answer 1

我相信你要找的是ticks:{max:x}。将其添加到yAxes比例。

var chartInstance = new Chart(ctx, {
    type: 'line',
    data: data,
    options: {
        scales: {
            yAxes: [{
                ticks: {
                    max: 5,
                    min: 0,
                    stepSize: 0.5
                }
            }]
        }
    }
});

编辑：如果您想要动态最大值，您可以确定数据集的最大值，找到高于它的设定百分比的整数，并将y轴的最大值设置为该值。

var data = [1, 2, 3];
var newmax = Math.max(...data);
newmax = Math.round(newmax*1.2);

然后将最大刻度设置为newmax：

ticks:{max:newmax}.

Charts.js图例超过了视图值

1 个答案: