javascript - 图表上的高点和低点被切断

Question

此图表上的低点和高点被切断，有没有办法在不知道数据中包含哪些数字的情况下解决此问题？

我见过其他人用图表的最小值和最大值创建一些填充，但我事先不知道这些值是什么。

图表:

此处显示了遇到相同问题的类似示例:http://codepen.io/erose/pen/LNwdQO/

这是 HTML:

<div class="chart-container">
  <canvas id="chart"></canvas>
</div>

这是 CSS:

.chart-container {
  width: 493px;
  height: 83px;
}

canvas {
  -moz-user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
}

这里是用于创建上述图表的 JS:

var ctx = $("#chart");

Chart.defaults.global.responsive = true;
Chart.defaults.global.maintainAspectRatio = false;
Chart.defaults.global.legend.display = false;
Chart.defaults.global.tooltips.backgroundColor = "lightblue";
Chart.defaults.global.tooltips.bodyFontFamily = "sans-serif";
Chart.defaults.global.tooltips.bodyFontSize = 20;
Chart.defaults.global.tooltips.bodyColor = "#95989a";
Chart.defaults.global.tooltips.bodyAlign = "left";
Chart.defaults.global.tooltips.titleFontSize = 0;
Chart.defaults.global.tooltips.titleMarginBottom = 0;
Chart.defaults.global.tooltips.footerMarginTop = 0;
Chart.defaults.global.tooltips.cornerRadius = 12;
Chart.defaults.global.tooltips.caretSize = 10;
Chart.defaults.global.tooltips.xPadding = 20;
Chart.defaults.global.tooltips.yPadding = 10;
Chart.defaults.scale.gridLines.color = 'white';

var myChart = new Chart(ctx, {
  type: 'line',
  data: {
    labels: ["            ", "", "", "", "", "", "", "", "", "            "],
    datasets: [{
      label: '$',
      data: [100,100,100,100,0,100,100,100,100,100],
      fill: false,
      borderWidth: 1,
      borderColor: "#2f75c1",
      borderCapSytle: "round",
      pointBorderColor: "#2f75c1",
      pointBackgroundColor: "#2f75c1",
      pointBorderWidth: 5,
      pointHoverRadius: 10,

    }]
  },
  options: {
    scales: {
      yAxes: [{
        gridLines: {
          display: false
        },
        scaleLabel: {
          display: false
        },
        scaleLkneColor: 'white',
        ticks: {
          display: false
        }
      }],
      xAxes: [{
        gridLines: {
          display: false
        },
        scaleLabel: {
          display: false
        },
        // ticks: {
        //   display: false
        // }
      }]
    }
  }
});

Answer 1

通过阅读您的问题，我相信您不仅希望圆圈不被切断，而且还希望图表内有一些额外的填充。

为此，我的结构会有所不同:

var ctx = $("#chart");

Chart.defaults.global.responsive = true;
Chart.defaults.global.maintainAspectRatio = false;
Chart.defaults.global.legend.display = false;
Chart.defaults.global.tooltips.backgroundColor = "lightblue";
Chart.defaults.global.tooltips.bodyFontFamily = "sans-serif";
Chart.defaults.global.tooltips.bodyFontSize = 20;
Chart.defaults.global.tooltips.bodyColor = "#95989a";
Chart.defaults.global.tooltips.bodyAlign = "left";
Chart.defaults.global.tooltips.titleFontSize = 0;
Chart.defaults.global.tooltips.titleMarginBottom = 0;
Chart.defaults.global.tooltips.footerMarginTop = 0;
Chart.defaults.global.tooltips.cornerRadius = 12;
Chart.defaults.global.tooltips.caretSize = 10;
Chart.defaults.global.tooltips.xPadding = 20;
Chart.defaults.global.tooltips.yPadding = 10;
Chart.defaults.scale.gridLines.color = 'white';
var getData = [100,100,100,100,0,100,100,100,100,100];
var getLabels = ["", "", "", "", "", "", "", "", "", ""];
var minNum = function(array){
  return Math.min.apply( Math, array )-10;
}
var maxNum = function(array){
  return Math.max.apply( Math, array )+10;
}
var myChart = new Chart(ctx, {
  type: 'line',
  data: {
    labels: getLabels,
    datasets: [{
      label: '$',
      data: getData,
      fill: false,
      borderWidth: 1,
      borderColor: "#2f75c1",
      borderCapSytle: "round",
      pointBorderColor: "#2f75c1",
      pointBackgroundColor: "#2f75c1",
      pointBorderWidth: 5,
      pointHoverRadius: 10,

    }]
  },
  options: {
    scales: {
      yAxes: [{
        gridLines: {
          display: false
        },
        scaleLabel: {
          display: false
        },
        scaleLkneColor: 'white',
        ticks: {
          suggestedMin: minNum(getData), 
          suggestedMax: maxNum(getData),
        }
      }],
      xAxes: [{
        gridLines: {
          display: false
        },
        scaleLabel: {
          display: false
        },
        // ticks: {
        //   display: false
        // }
      }]
    }
  }
});

.chart-container {
  width: 493px;
  height: 83px;
}

canvas {
  -moz-user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.1.3/Chart.bundle.min.js"></script>
<div class="chart-container">
  <canvas id="chart"></canvas>
</div>

2 重要变化

1. 我创建了一个 getData var 来保存数组，这样数组就可以被格式化，但是你喜欢这个函数并不关心它只是查找 getData 并需要一个数组。
2. 我创建了一个 minNum 和 maxNum 函数来遍历数组并选择最低或最高数字，然后在股票代码中调用它，您可以在 ChartJS Scales 找到更多相关信息。