图表上的高点和低点被切断 [英] High and low points on chart getting cut off

问题描述

此图表上的低点和高点正在被切断，有没有办法解决这个没有知道数据中会有哪些数字？

The low and high points on this chart are getting cut off, is there any way to fix this without knowing what numbers will be in the data?

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

I've seen other people create some padding with the chart's minimum and maximum values, but I don't know what the values will be beforehand.

图表：

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

A similar example suffering from the same problem is shown here: 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用来创建上面的图表：

and here the JS used to create the above chart:

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
        // }
      }]
    }
  }
});

推荐答案

从阅读你的问题我相信你不仅希望为了不切断圆圈，但你想在图表中添加一些额外的填充。

From reading your question I believe you not only want the for the circle to not be cut off but you would like some extra padding inside the chart.

为此，我会将其结构略有不同：

For that I would structure this a little different:

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 中找到更多信息。

1. I create a getData var to hold the array this way the array can be formatted however you like the function does not care it just looks for getData and expects an array.
2. I created a minNum and maxNum function to go through the array and select either the lowest or highest number then call that inside the ticker you can find more on this at ChartJS Scales

这篇关于图表上的高点和低点被切断的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！