图表js柱最小值，最大值和变量值

Question

嗨，我有一个带有chartjs的图表，它插入最小值，最大值，平均值之间，带有条形图表。到目前为止，一切都很好，输入了值，我想做的是图形的条形从y轴上的最小值开始定位到y轴上的最大值，我不希望柱线从值0开始。

dataset = {
  labels: ['monday', 'tuesday', 'wednesday', 'thursday', 'friday', 'saturday', 'sunday'],
  datasets: [{
      label: 'min',
      borderWidth: 4,
      borderColor: "#ef4931",
      backgroundColor: "#ef4931",
      borderJoinStyle: 'miter',
      pointHitRadius: 10,
      data: data[1],
      fill: false,
    },
    {
      label: 'avg',
      borderWidth: 4,
      borderColor: "#ef4931",
      backgroundColor: "#ef4931",
      borderJoinStyle: 'miter',
      pointHitRadius: 10,
      data: data[0],
      fill: "-1",
    },
    {
      label: 'max',
      borderWidth: 4,
      borderColor: "#ef4931",
      backgroundColor: "#ef4931",
      borderJoinStyle: 'miter',
      pointHitRadius: 10,
      data: data[2],
      fill: "-1",
    }
  ]
};

options = {
  legend: {
    display: false,
  },
  title: {
    display: true,
    position: 'bottom',
    fontSize: 14
  },
  tooltips: {
    mode: 'index',
    intersect: false,
    titleFontStyle: "bold",
    titleFontColor: "rgba(255, 255, 255, 1)",
    bodyFontStyle: "normal",
    bodyFontColor: "rgba(255, 255, 255, 1)",
    backgroundColor: "rgba(102, 102, 102, 1)",
    borderWidth: 1,
    bodySpacing: 5,
    xPadding: 15,
    yPadding: 15,
    displayColors: false,
    callbacks: {
      title: function(item, data) {
        var title = "";
        title += item[0].xLabel;
        return title;
      }
    }
  },
  responsive: true,
  maintainAspectRatio: false,
  scales: {
    xAxes: [{
      stacked: true,
      barThickness: 10,
    }],
    yAxes: [{
      stacked: true,
      display: true,
      scaleLabel: {
        display: true,
        fontSize: 14,
        fontStyle: "bold",
      },
      ticks: {
        callback: function(value, index, values) {
          return parseInt(value) + " bpm";
        },
      }
    }]
  },
  animation: {
    duration: 1000,
    easing: "easeInOutQuad"
  }
};

myChart.config.data = dataset;
myChart.options = options;
myChart.config.type = "bar";
myChart.update(); 

Answer 1

您可以将浮动条形图和堆叠条形图组合在一起。请参阅https://codepen.io/fantasyzer/pen/KKaqgoM示例。请注意，每个条形图的data是以数组的形式给出的。如果您将stackable设置为false对于y标度，这些值将作为绝对值给出：

  datasets: [
  {
    data: [
      [10,12],
      [20,25],
      [15,25],
      [25,28],
  ...

ref:https://www . chart js . org/docs/latest/samples/bar/floating . html，https://www . chart js . org/docs/latest/samples/bar/stacked . html

Answer 2

在您的y轴配置中，您可以在堆叠和显示道具之间添加建议的Min或min。有了这个，刻度将从这个数字开始，在这里你可以输入最低柱的值。

如果存在具有较低值的柱，则建议Min将变低，如果您使用min，则将其用作最终值，因此，如果您有一个值较低的柱，则不会显示。