Question

ChartJS v2

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

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

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

上面的屏幕快照中的示例使用以下设置：

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

Answer 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

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

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

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

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

祝你好运。

刻度线标签与轴标签重叠

2 个答案: