Chart.js的最小，最大和平均值 [英] Chartjs bar min, max and avarage value

问题描述

我有一个带有chartjs的图表，该图表插入在最小值，最大值，平均值之间，并带有条形图.到目前为止，一切都很好，输入了值，我要做的是，图形的条形图的位置从y轴上的最小值开始，直到y轴上的最大值开始，我不希望该条形图从值0开始.

 数据集= {标签:['monday'，'tuesday'，'wednesday'，'thursday'，'friday'，'saturday'，'sunday']，数据集:[{标签:"min"，borderWidth:4borderColor:#ef4931"，backgroundColor:#ef4931"，borderJoinStyle:'miter'，pointHitRadius:10，数据:数据[1]，填写:假，}，{标签:"avg"，borderWidth:4borderColor:#ef4931"，backgroundColor:#ef4931"，borderJoinStyle:'miter'，pointHitRadius:10，数据:数据[0]，填写:-1"，}，{标签:"max"，borderWidth:4borderColor:#ef4931"，backgroundColor:#ef4931"，borderJoinStyle:'miter'，pointHitRadius:10，数据:数据[2]，填写:-1"，}]};选项= {传奇: {显示:false，}，标题: {显示:true，位置:底部"，字体大小:14}，工具提示:{模式:索引"，相交:假，titleFontStyle:粗体"，titleFontColor:"rgba(255、255、255、1)"，bodyFontStyle:普通"，bodyFontColor:"rgba(255、255、255、1)"，backgroundColor:"rgba(102，102，102，1)"，borderWidth:1bodySpacing:5x填充:15yPadding:15displayColors:否，回调:{标题:函数(项目，数据){var title =";标题+ = item [0] .xLabel;返回标题；}}}，响应式的:是的，maintenanceAspectRatio:否，比例尺:{x轴:[{堆叠:是的，bar厚度:10，}]，y轴:[{堆叠:是的，显示:true，scaleLabel:{显示:true，字号:14fontStyle:"bold"，}，滴答声:{回调:函数(值，索引，值){返回parseInt(value)+"bpm"；}，}}]}，动画片: {持续时间:1000缓动:"easeInOutQuad"；}};myChart.config.data =数据集;myChart.options =选项;myChart.config.type ="bar";myChart.update(); 

解决方案

您可以组合浮动条"和堆积条形图".有关示例，请参见

参考: https://www.chartjs.org/docs/latest/samples/bar/floating.html ， https://www.chartjs.org/docs/latest/samples/bar/stacked.html

Hi I have a chart with chartjs, which inserts between min, max, average values, with a bar type chart. So far, everything is fine, the values are entered, what I want to do is that the bars of the graph are positioned starting from their min on the y axis up to the maximum on the y axis, I do not want the bar to start from the value 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(); 

解决方案

You can combine "floating bars" and "stacked bar chart". See https://codepen.io/fantasyzer/pen/KKaqgoM for an example. Note that the data of each bar is given as an array [Ybegin,Yend]. If you set stackable to false for the y scale the values are to be given as absolute:

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

Ref: https://www.chartjs.org/docs/latest/samples/bar/floating.html, https://www.chartjs.org/docs/latest/samples/bar/stacked.html

这篇关于Chart.js的最小，最大和平均值的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！