刻度标签与轴标签重叠答案

【问题标题】：Tick label overlaps axis label刻度标签与轴标签重叠
【发布时间】：2019-05-11 14:59:35
【问题描述】：

ChartJS v2

我在 X 轴刻度标签与 X 轴标签重叠时遇到小屏幕问题（在 Chrome 中使用 iPhone 5 屏幕模拟器）。

我的Y轴标签也被剪掉了。

我尝试过为标签 2 使用 padding 和 lineHeight 无济于事。我还尝试将 X 轴刻度标签的最大/最小旋转值设置为 90 度，这使问题变得更糟。

上面截图中的例子使用了这些设置：

var ctx = document.getElementById("myChart").getContext("2d");
var chart = new Chart(ctx, {
  // The type of chart we want to create
  type: "bar",

  // The data for our dataset
  data: {
    labels: [
      "0k-40k",
      "40k-80k",
      "80k-100k",
      "100k-120k",
      "120k-160k",
      "160k-180k",
      "180k-220k"
    ],
    datasets: [
      {
        label: "My First dataset",
        backgroundColor: "rgb(255, 99, 132)",
        borderColor: "rgb(255, 99, 132)",
        data: [0, 10, 5, 2, 20, 30, 45]
      }
    ]
  },

  // Configuration options go here
  options: {
    legend: {
      display: false
    },
    scales: {
      xAxes: [
        {
          ticks: {
            autoSkip: false,
            fontSize: 16,
            fontStyle: "bold",
            precision: 2,
            suggestedMin: 0
          },
          scaleLabel: {
            display: true,
            fontSize: 16,
            fontStyle: "bold",
            labelString: "Chart Label X",
          }
        }
      ],
      yAxes: [
        {
          ticks: {
            fontSize: 16,
            fontStyle: "bold",
            precision: 2,
            suggestedMin: 0
          },
          scaleLabel: {
            display: true,
            fontSize: 16,
            fontStyle: "bold",
            labelString: "Chart Label Y",
          }
        }
      ]
    }
  }
});

这看起来可能是 ChartJS 在旋转时没有正确计算标签高度的错误。其他人有这个问题吗？有解决办法吗？

Codepen： https://codepen.io/afisher88/pen/mayvoe

GitHub 问题： https://github.com/chartjs/Chart.js/issues/5906

【问题讨论】：

标签： javascript chart.js

【解决方案1】：

最后我不得不妥协并缩小字体大小，删除 x 和 y 标签并更新图例以提供所需的细节。

var ctx = document.getElementById("myChart").getContext("2d");
var chart = new Chart(ctx, {
  // The type of chart we want to create
  type: "bar",

  // The data for our dataset
  data: {
    labels: [
      "0k-40k",
      "40k-80k",
      "80k-100k",
      "100k-120k",
      "120k-160k",
      "160k-180k",
      "180k-220k"
    ],
    datasets: [
      {
        label: "My dataset x vs y",
        backgroundColor: "rgb(255, 99, 132)",
        borderColor: "rgb(255, 99, 132)",
        data: [0, 10, 5, 2, 20, 30, 45]
      }
    ]
  },

  // Configuration options go here
  options: {
    legend: {
      display: true
    },
    scales: {
      xAxes: [
        {
          ticks: {
            autoSkip: false,
            fontSize: 11,
            fontStyle: "bold",
            precision: 2,
            suggestedMin: 0
          }
        }
      ],
      yAxes: [
        {
          ticks: {
            fontSize: 11,
            fontStyle: "bold",
            precision: 2,
            suggestedMin: 0
          }
        }
      ]
    }
  }
});

https://codepen.io/afisher88/pen/XoNVNe

【讨论】：

【解决方案2】：

不同的浏览器可以以多种不同的方式呈现画布图像。小屏幕设备也不例外。您可以在正常屏幕上使用不同的浏览器尝试您的代码来断言您的声明。

Chart.js 有许多可用于代码的选项。即您可以根据您的环境使用“Chart.bundle.js”或“Chart.js”。您使用的 CSS 也会影响图表在画布上的呈现方式。捆绑的构建在单个文件中包含 Moment.js。如果您需要时间轴并希望包含单个文件，则应使用此版本。

例如：

<!DOCTYPE html>
<!--
pcharts.html
-->
<html>
    <head>
        <title>P Charts</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link rel="stylesheet" href="../public/css/main.css">
        <script src="../lib/charts/Chart.bundle.js"></script>
        <script src="../lib/jquery/jquery.js"></script>
        <script src="../js/appcharts.js"></script>
    </head>
    <body>
        <h1>Charts</h1>
        <hr>
        <br>
        <div id="myCan">
            <canvas id="myChart" width="100" height="100"></canvas>
        </div>
        <br>
        <br><br><hr><br><br>
    </body>
</html>

appcharts.js

/* 
 * appcharts.js
 * 
 */

var ctx;
var myChart;
var cdata = [0, 10, 5, 2, 20, 30, 45];
var lblX = ["0k-40k","40k-80k","80k-100k","100k-120k","120k-160k","160k-180k","180k-220k"];


function init(){
    render();
};

function render(){
    ctx = document.getElementById("myChart").getContext('2d');
    myChart = new Chart(ctx, {
    type: 'bar',
    data: {
        labels: lblX,
        datasets: [{
            label: 'My demo2 dataset.',
            data: cdata,
            backgroundColor: [
                'rgba(255, 99, 132, 0.2)',
                'rgba(54, 162, 235, 0.2)',
                'rgba(255, 206, 86, 0.2)',
                'rgba(75, 192, 192, 0.2)',
                'rgba(153, 102, 255, 0.2)',
                'rgba(255, 159, 64, 0.2)'
            ],
            borderColor: [
                'rgba(255,99,132,1)',
                'rgba(54, 162, 235, 1)',
                'rgba(255, 206, 86, 1)',
                'rgba(75, 192, 192, 1)',
                'rgba(153, 102, 255, 1)',
                'rgba(255, 159, 64, 1)'
            ],
            borderWidth: 1
        }]
    },
    options: {
        scales: {
            xAxes: [{
                ticks:{
                    beginAtZero:true        
                },
                scaleLabel:{
                    display: true,
                    labelString: "Chart Label X."
                }
            }],
            yAxes: [{
                ticks: {
                    beginAtZero:true
                },
                scaleLabel: {
                    display: true,
                    labelString: "Chart Label Y."
                }
            }]
        }
    }
});
};

//
//$(document).ready(function(){
//    $("#myCan").hide("slow");
//    $("#myCan").show("slow");
//});
//

window.onload = function(){
  init();  
};
//
//

在小画布中挤压大图像就像在小瓶子中挤压大西红柿。从那个瓶子里出来的是番茄酱和番茄种子。当然，当且仅当它们仍然可以时，您可以重新种植番茄种子。正交投影就是这样做的。你可以渲染一个大使用正交投影技术在小屏幕上显示图像。例如摄像机的位置或变形决定了观看者将看到或看到的内容。

当您使用图表时，您实际上是在绘制图像并将其呈现在屏幕上以供查看者查看。您可以使用：npm install chart.js --save 获取最新版本的 chart.js，或从以下位置下载：https://github.com/chartjs/Chart.js/releases/latest 它附带文档和示例。

要创建图表，我们需要实例化 Chart 类。为此，我们需要传入要绘制图表的画布的节点、jQuery 实例或 2d 上下文。获得元素或上下文后，您就可以实例化预定义的图表类型或创建自己的图表类型了。

祝你好运。

【讨论】：

这不能回答问题。该图表使用完全不同的配置。如果你有解决方案，也许 fork 这支笔codepen.io/afisher88/pen/mayvoe 并解释你所做的更新。
如果您的代码无法正常工作，您可以随时对其进行调试。编写代码的目的是编写工作程序。我已经编写了工作代码示例，只是为了做到这一点。您可以使用许多技术来绘制图像对象。有些使用 2d 和 3d。对于 3d，您必须定义 X、Y 和 Z 轴。您还可以旋转、扭曲或变换图像。您使用的工具也很重要。