Chart.js 2.0 - Как изменить внешний вид элементов холста / диаграммы по умолчанию
Я использую новый Chart.js и пытаюсь выполнить несколько настроек. Зная JS, но плохо знакомый с canvas, я немного борюсь. Я постараюсь предоставить как можно больше информации.
Ссылки по теме
- JSBin рабочей демо
- Документация Chart.js 2.0
- Снимок экрана диаграммы - текущее состояние
- Снимок экрана диаграммы - желаемое состояние
Код - JSBin
JavaScript
/**
* Chart.js Global Config
*/
Chart.defaults.global.pointHitDetectionRadius = 5;
window.count = 0;
/**
* Chart Data
* @type {Object}
*/
var lineChartData = {
labels: ["", "JAN", "FEB", "MAR", "APR", "MAY", "JUN", "JUL", "AUG", "SEP", "OCT", "NOV", "DEC", ""],
datasets: [{
label: "Students",
data: [ 200, 250,220,180,290,300,370,350,200,280,260,190,210, 200 ],
backgroundColor: "rgba(247,155,45,1.0)",
borderColor: "rgba(247,155,45,1.0)",
borderCapStyle: 'butt',
borderDash: [],
borderDashOffset: 0.0,
pointBorderColor: "rgba(245,245,245,1)",
pointBackgroundColor: "rgba(80,81,81,1)",
pointHoverBorderWidth: 5,
pointBorderWidth: 5,
pointRadius: 8,
pointHoverRadius: 9,
pointHitRadius: 8,
}]
};
/**
* Init
*/
window.onload = function() {
var $chart = $('#chart');
window.lineChart = new Chart($chart[0], {
type: 'line',
data: lineChartData,
options: {
showLines: true,
// Legend
legend : {
display: false
},
// title
title:{
display:false,
text:'Student Hours'
},
// Tooltips
tooltips: {
enabled: false,
},
// Scales
scales: {
yAxes: [{
id: 'y-axis-0',
gridLines: {
display: true,
lineWidth: 1,
color: "rgba(255,255,255,0.85)"
},
ticks: {
beginAtZero:true,
mirror:false,
suggestedMin: 0,
suggestedMax: 500,
},
afterBuildTicks: function(chart) {
}
}],
xAxes: [{
id: 'x-axis-0',
gridLines: {
display: false
},
ticks: {
beginAtZero: true
}
}]
},
}
});
};
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.1.3/Chart.bundle.min.js"></script>
<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
</head>
<body>
<div id="chartjs-container" class="chartjs-wrap">
<canvas id="chart"></canvas>
</div>
</body>
</html>
CSS
#chartjs-container {
width:80%;
margin:20px auto;
position: relative;
}
.chartjs-wrap {
background-color: rgba(250, 210, 162, 1.0);
}
canvas {
-moz-user-select: none;
-webkit-user-select: none;
-ms-user-select: none;
height:100%;
}
Что я пытаюсь сделать
- Удалить линию сетки вверх по оси Y
- Удалите точки на первом и последнем элементах набора данных, которые соответствуют левому / правому краю диаграммы
- Вставить метки шкалы оси Y
- Сделать наложение линий сетки по оси X поверх заливки данных линии
Скриншоты
Текущее состояние 
Желаемое состояние (приблизительное) 
Любая помощь, направившая меня в правильном направлении, была бы великолепна. Есть ли на холсте эквивалент элемента "Проверка элемента"? Эти исправления были бы тривиальными в CSS, но я не уверен, как отлаживать.
ура
1 ответ
1. Удалите линию сетки вверх по оси Y
Просто установите display ложно для options.scales.yAxes, Это также удалит все метки - мы вызовем библиотечный метод для рисования меток (без рисования оси Y) в плагине (см. Шаг 4)
2.Снимите точки на первом и последнем элементах набора данных, которые соответствуют левому / правому краю диаграммы
Просто передайте в массиве pointRadius а также pointHoverRadius вместо числа. Следующие массивы будут скрывать первые и последние точки (с вашими данными)
...
pointRadius: [0, 8, 8, 8, 8, 8, 8, 8, 8, 8, 8, 8, 8, 0],
pointHoverRadius: [0, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 0],
...
Возможно, вам придется сгенерировать это с помощью скрипта, если ваша длина данных является динамической.
3. Вставьте метки шкалы оси Y
Задавать ticks.mirror за options.scales.yAxes к истине. Плагин (из шага 4) будет просто вызывать библиотеку draw метод для масштаба.
4.Сделать линии сетки по оси X поверх заливки данных линии.
Чтобы заставить gridLines появляться (как оно есть) над заливкой, но под точками, проще всего было бы нарисовать ее под заливкой и установить для заливки слегка прозрачное значение.
backgroundColor: "rgba(247,155,45,0.4)",
Мы должны нарисовать gridLines самостоятельно, так как мы не хотим, чтобы они начинались с края. Так установить gridLines.display ложно для options.scales.yAxes и зарегистрируйте следующий плагин
Chart.pluginService.register({
afterDraw: function (chart, easingDecimal) {
var yScale = chart.scales['y-axis-0'];
var helpers = Chart.helpers;
var chartArea = chart.chartArea;
// draw labels - all we do is turn on display and call scale.draw
yScale.options.display = true;
yScale.draw.apply(yScale, [chartArea]);
yScale.options.display = false;
yScale.ctx.save();
// draw under the fill
yScale.ctx.globalCompositeOperation = 'destination-over';
// draw the grid lines - simplified version of library code
helpers.each(yScale.ticks, function (label, index) {
if (label === undefined || label === null) {
return;
}
var yLineValue = this.getPixelForTick(index);
yLineValue += helpers.aliasPixel(this.ctx.lineWidth);
this.ctx.lineWidth = this.options.gridLines.lineWidth;
this.ctx.strokeStyle = 'rgba(255, 255, 255, 0.3)';
this.ctx.beginPath();
this.ctx.moveTo(chartArea.left + 40, yLineValue);
this.ctx.lineTo(chartArea.right, yLineValue);
this.ctx.stroke();
}, yScale);
yScale.ctx.restore();
},
})
Плагины будут вызываться для всех графиков. Если вы хотите пропустить приведенную выше логику для некоторых графиков, все, что вам нужно, это установить какое-то свойство на options объект и проверьте его перед запуском вашей логики (например, yAxis.options.custom на том же уровне, что и yAxis.options.display
Если вы хотите скрыть метки 0 и 500, вы можете установить ticks.callback за options.scales.yAxes, вот так
callback: function(value) {
if (value !== 0 && value !== 500)
return '' + value;
},
Обратите внимание, что он работает до тех пор, пока ваш масштаб находится в пределах рекомендуемого минимума и рекомендуемого максимума. Если ваши данные выходят за эти границы, вам придется использовать свойства масштаба.
Чтобы сделать фон метки оси X белым, просто добавьте нижний бит в конец плагина. afterDraw метод
yScale.ctx.save();
yScale.ctx.fillStyle = 'white';
yScale.ctx.globalCompositeOperation = 'destination-over';
yScale.ctx.fillRect(0, yScale.bottom, chartArea.right, chartArea.bottom);
yScale.ctx.restore();
Он просто рисует белый прямоугольник под содержимым холста. Поскольку цвет вашего фона устанавливается с помощью CSS, прямоугольник находится поверх цвета фона, и все блестит.
Вы также должны переместить цвет фона из.chartjs-wrap на холст (иначе вы получите оранжевую рамку внизу)
canvas {
background-color: rgba(250, 210, 162, 1.0);
...
Обновленная версия вашего JSBin будет применяться ко всем вышеизложенным - http://jsbin.com/parucayara/1/edit?output