刻度线标签与轴标签重叠
[英]Tick label overlaps axis label
问题描述
ChartJS v2 
ChartJS v2
I am having a problem on small screen sizes (using the iPhone 5 screen emulator in Chrome) with my X axis tick labels overlapping my X axis label. 我在X轴刻度标签与X轴标签重叠的小屏幕尺寸（在Chrome中使用iPhone 5屏幕模拟器）上遇到问题。
My Y axis label is also being cut off. 我的Y轴标签也被切除了。
I have tried playing around with padding and lineHeight for Label 2 to no avail. 我尝试过使用Label 2的padding和lineHeight无效。 I have also tried setting the max / min rotation values for the X axis tick labels to 90deg which makes the issue worse. 我还尝试将X轴刻度标签的最大/最小旋转值设置为90deg，这使问题变得更糟。
The example in the screenshot above uses these settings: 上面的屏幕快照中的示例使用以下设置：
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",
}
}
]
}
}
});
This looks like it is probably a bug in ChartJS not calculating the label heights correctly when rotated. 看起来这可能是ChartJS中的错误，在旋转时无法正确计算标签高度。 Has anybody else had this problem? 还有其他人有这个问题吗？ Is there a work around? 有没有解决的办法？
Codepen: https://codepen.io/afisher88/pen/mayvoe Codepen： https ：//codepen.io/afisher88/pen/mayvoe
GitHub Issue: https://github.com/chartjs/Chart.js/issues/5906 GitHub问题： https : //github.com/chartjs/Chart.js/issues/5906
2 个解决方案
解决方案1
0 2018-12-19 10:14:21
In the end I had to compromise and shrink the font size, removing the x and y labels and updating the legend to provide the detail needed. 最后，我不得不折衷和缩小字体大小，删除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 https://codepen.io/afisher88/pen/XoNVNe
解决方案2
-1 2018-12-12 19:52:53
Different browsers can render the canvas image in many different ways. 不同的浏览器可以以许多不同的方式渲染画布图像。 Small screen devices are not an exception. 小屏幕设备也不例外。 You can try your code with different browsers on normal screen to assert your claim. 您可以在正常屏幕上使用其他浏览器尝试使用代码来声明您的主张。
Chart.js have many options you can use for your code. Chart.js具有许多可用于代码的选项。 ie You can use “Chart.bundle.js” or “Chart.js” depending on your environment. 即您可以根据环境使用“ Chart.bundle.js”或“ Chart.js”。 The CSS you use can also affect how your chart is rendered on a canvas. 您使用的CSS也会影响图表在画布上的呈现方式。 The bundled build includes Moment.js in a single file. 捆绑的版本在单个文件中包含Moment.js。 You should use this version if you require time axes and want to include single file. 如果需要时间轴并且要包含单个文件，则应使用此版本。
For example: 例如：
<!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
/*
* 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();
};
//
//
Squeezing the big image in a small canvas is like squeezing big tomatoes in a small bottle. 在小画布上挤压大图像就像在一个小瓶子里挤压大西红柿。 What will come out of that bottle is the tomato sauce and tomato seeds. 从那瓶出来的是番茄酱和番茄种子。 Of course you can replant the tomato seeds if only and only if they are still OK. 当然，仅在且仍可以的情况下，您才能重新种植番茄种子。 Orthographic projection do just that. 正射投影就是这样做的。 You can render a big image in a small screen by using orthographic projection technique. 您可以使用正交投影技术在小屏幕上渲染大图像。 eg Positioning of the camera or distortion determines what the viewer will see or look at. 例如，摄像机的位置或变形决定了观看者将看到或观看的东西。
When you are using charts you are actually drawing an image and rendering it on a screen for the viewer to look at. 使用图表时，实际上是在绘制图像并将其呈现在屏幕上，以供查看者查看。 You can get the latest version of chart.js by using: npm install chart.js --save or download it from: https://github.com/chartjs/Chart.js/releases/latest It comes with docs and samples. 您可以使用以下命令获取最新版本的chart.js： npm install chart.js --save或从以下网址下载： https : //github.com/chartjs/Chart.js/releases/latest它随附于文档和示例。
To create a chart, we need to instantiate the Chart class. 要创建图表，我们需要实例化Chart类。 To do this, we need to pass in the node, jQuery instance, or 2d context of the canvas of where we want to draw the chart. 为此，我们需要传入要绘制图表的画布的节点，jQuery实例或2d上下文。 Once you have the element or context, you're ready to instantiate a pre-defined chart-type or create your own. 一旦有了元素或上下文，就可以实例化预定义的图表类型或创建自己的图表类型。
Good luck. 祝好运。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.