Метка в виде галочки перекрывает метку оси
ChartJS v2
У меня проблема с маленькими размерами экрана (с использованием эмулятора экрана iPhone 5 в Chrome), когда метки отметок оси X перекрывают мою метку оси X.
Моя метка оси Y также обрезается.
Я пробовал поиграть с padding и lineHeight для Label 2, но безрезультатно. Я также попытался установить значения вращения max / min для меток оси 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 [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 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 контекст холста, в котором мы хотим нарисовать диаграмму. Когда у вас есть элемент или контекст, вы готовы создать экземпляр заранее определенного типа диаграммы или создать свой собственный.
Удачи.
Если ваш код не работает, вы всегда можете его отладить. Цель написания кода - написать рабочую программу. Я написал пример рабочего кода, просто для этого. Есть много технологий, которые вы можете использовать для рисования объекта изображения. Некоторые используют 2d и 3d. С помощью 3D вы должны определить оси X, Y и Z. Вы также можете вращать, искажать или трансформировать изображение. Инструменты, которые вы используете, также важны.
В конце концов, мне пришлось пойти на компромисс и уменьшить размер шрифта, удалив метки 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
}
}
]
}
}
});
Это не отвечает на вопрос. На графике используется совершенно другая конфигурация. Если у вас есть решение, возможно, разветвите эту ручку codepen.io/afisher88/pen/mayvoe и объясните сделанные вами обновления.