个人中心
gpt4 book ai didi

javascript - Y 轴上的值消失(隐藏在标签下)

转载 作者：行者123 更新时间：2023-11-28 04:00:41 25 4
gpt4 key购买 nike

我使用 ChartJS 库来创建折线图。不知何故，Y 值上的值几乎被隐藏了。我想知道如果我有一组数据，如何动态地生成 y 值，以便它不会隐藏我的 y 值，并且仍然根据我的数据集选择自动缩放。

这是CodePen 

var ctx = document.getElementById("myChart");
var myChart = new Chart(ctx, {
    type: 'line',
    data: {
        labels: [1510001367000, 1510001379000, 1510001415000, 1510001427000],
        datasets: [
          {
            label: 'dataset 1',
            fill: false,
            backgroundColor: 'rgb(255, 99, 132)',
            data: [72, 72, 72, 72]
          },
          {
            label: 'dataset 2',
            fill: false,
            backgroundColor: 'rgb(54, 162, 235)',
            data: [70, 70, 70, 70]
          }
        ]
    },
    options: {
      responsive: true      
    }
});
.myChartDiv {
  width: 600px;
  height: 800px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.1.3/Chart.min.js"></script>
<html>
  <body>
    <div class="myChartDiv">
      <canvas id="myChart" width="600" height="800"></canvas>
    </div>
  </body>
</html>

enter image description here

最佳答案

Thank you for the codepen, always helps to have these in a question!

您可以通过添加以下比例选项来设置 y 轴的最小/最大:

options: {
      responsive: true,
      scales:{
        yAxes:[{
          ticks:{
            suggestedMin:69,
            suggestedMax:73
          }
        }]
      }
    }

这是一个 fork 的 CodePen

relevant docs here

您始终可以分别将最小值和最大值计算为 (min - 1) 和 (max +1)，以始终获得偏移量 1。

更新:===================================

在 CodePen 中，您使用的是 Chartjs 2.1.3，它现在是旧版本。以下是如何构建一个简单的插件来向线性字符最小/最大添加偏移量:

首先是插件:

// Define a plugin to provide data labels
Chart.pluginService.register({
  beforeUpdate: function(chart) {
    // get custom defined offset
    var offset = chart.options.customOffset;
    // exisit gracefully if offset not defined or less than 0
    if(!offset || offset < 0) return;

    // preset the min and max
    var max = Number.MIN_VALUE;
    var min = Number.MAX_VALUE;

    // find min/max values of all datasets
    chart.data.datasets.forEach(function(dataset){
      var newMax = Math.max.apply(null, dataset.data);
      var newMin = Math.min.apply(null, dataset.data); 
      max = newMax > max ? newMax : max;
      min = newMin > min ? min : newMin;
    });
    // change min and max tick values
    chart.options.scales.yAxes[0].ticks.max = max + offset;
    chart.options.scales.yAxes[0].ticks.min = min - offset;
  }
});

现在您可以向选项添加 customOffset 属性:

 options: {
      customOffset: 0.1,
      responsive: true,
    }

看看这个 CodePen

与您的数据有 0.5 偏移的示例预览: enter image description here

更新2 ===========================

对插件进行了一些小改动，以便当隐藏一个数据集时，其他数据集居中并且图表表现得适当:

Chart.pluginService.register({
  beforeUpdate: function(chart){
    console.log("beforeUpdate");
    // get custom defined offset
    var offset = chart.options.customOffset;
    // exisit gracefully if offset not defined or less than 0
    if(!offset || offset < 0) return;

    // preset the min and max
    var max = Number.MIN_VALUE;
    var min = Number.MAX_VALUE;

    // find min/max values of all dataset
    chart.data.datasets.forEach(function(dataset){
      if(!dataset._meta[0].hidden){
        console.log(dataset)
        var newMax = Math.max.apply(null, dataset.data);
        var newMin = Math.min.apply(null, dataset.data); 
        max = newMax > max ? newMax : max;
        min = newMin > min ? min : newMin;
      }
    });
    // change min and max tick values
    chart.options.scales.yAxes[0].ticks.max = max + offset;
    chart.options.scales.yAxes[0].ticks.min = min - offset;
  }
});

CodePen

更新3 ===========================

这是一个为图表中所有 Y 轴添加偏移量的插件:

Chart.pluginService.register({
    beforeUpdate: function(chart){
      console.log("beforeUpdate");
      // get custom defined offset
      var offset = chart.options.customOffset;
      // exisit gracefully if offset not defined or less than 0
      if(!offset || offset < 0) return;
      var yAxes = chart.options.scales.yAxes;
      for(var i=0; i<yAxes.length; i++){
        var axis = yAxes[i];
        var datasets = chart.data.datasets;
        var max = Number.MIN_VALUE;
        var min = Number.MAX_VALUE;
        var datasetsOnAxis = [];

        for(var j=0; j<datasets.length; j++){ // add datasets for this axes to datasetsOnAxis
          var dataset = datasets[j];
          var meta = chart.getDatasetMeta(j);
          if  (meta.yAxisID === axis.id) datasetsOnAxis.push(dataset); 
        }

        for(var k=0; k<datasetsOnAxis.length; k++){
          var dataset = datasetsOnAxis[k]
          var newMax = Math.max.apply(null, dataset.data);
          var newMin = Math.min.apply(null, dataset.data);
          max = newMax > max ? newMax : max;
          min = newMin > min ? min : newMin;
        }
        axis.ticks.max = max + offset;
        axis.ticks.min = min - offset;   
      }
    }
});

关于javascript - Y 轴上的值消失(隐藏在标签下)，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/47146427/

25 4 0
文章推荐： javascript - 单击屏幕上的任意位置时如何隐藏特定的 div
文章推荐： javascript - 将 div 的高度设置为等于计算出的宽度
文章推荐： html - anchor 标记不能在 div 中间歇性工作
文章推荐： html - 如何在中间垂直对齐图像和文本？
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com