Мне было интересно, есть ли способ сделать метки X-Axis в increment chart.js определенным масштабом.
У меня есть ярлыки от 50 до 90, и каждое число между ними отображается.
Я хотел бы перечислить метки на 5 или 10, потому что в настоящее время они все хрустят вместе.
Он также отключает левую часть оси y.
EDIT 2: Хорошо, поэтому мне действительно нужна такая функциональность в проекте, над которым я работаю, поэтому я создал пользовательскую сборку chart.js, чтобы включить эту функциональность. http://jsfiddle.net/leighking2/mea767ss/ или https://github.com/leighquince/Chart.js
Это комбинация двух решений ниже, но привязана к ядру CHart.js, поэтому нет необходимости указывать настраиваемый масштаб и диаграммы.
В обеих линейных и гистограммах есть новая опция
labelsFilter:function(label, index){return false;)
по умолчанию это просто вернет false, чтобы все метки на оси x отображались, но если фильтр передан как опция, тогда он будет фильтровать метки
так что вот пример с двумя строками и строкой
var ctx = document.getElementById("chart").getContext("2d");
var data = {
labels: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25, 26, 27, 28, 29, 30],
datasets: [{
label: "My First dataset",
fillColor: "rgba(220,220,220,0.5)",
strokeColor: "rgba(220,220,220,0.8)",
highlightFill: "rgba(220,220,220,0.75)",
highlightStroke: "rgba(220,220,220,1)",
data: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25, 26, 27, 28, 29, 30]
}]
};
var myLineChart = new Chart(ctx).Line(data, {
labelsFilter: function (value, index) {
return (index + 1) % 5 !== 0;
}
});<script src="http://quincewebdesign.com/cdn/Chart.js"></script>
<canvas id="chart" width="1200px"></canvas>Я обновил предоставленный фрагмент кода, чтобы предотвратить вращение меток оси X. Также некоторые параметры не передавались в конструкторе. Проверьте комментарии//Майка Вальдера.
//Code to manually set the interval of X-Axis Labels: From http://jsfiddle.net/leighking2/n9c8jx55/
Chart.CustomScale = Chart.Scale.extend({
draw: function () {
var helpers = Chart.helpers;
var each = helpers.each;
var aliasPixel = helpers.aliasPixel;
var toRadians = helpers.radians;
var ctx = this.ctx,
yLabelGap = (this.endPoint - this.startPoint) / this.steps,
xStart = Math.round(this.xScalePaddingLeft);
if (this.display) {
ctx.fillStyle = this.textColor;
ctx.font = this.font;
each(this.yLabels, function (labelString, index) {
var yLabelCenter = this.endPoint - (yLabelGap * index),
linePositionY = Math.round(yLabelCenter);
ctx.textAlign = "right";
ctx.textBaseline = "middle";
if (this.showLabels) {
ctx.fillText(labelString, xStart - 10, yLabelCenter);
}
ctx.beginPath();
if (index > 0) {
// This is a grid line in the centre, so drop that
ctx.lineWidth = this.gridLineWidth;
ctx.strokeStyle = this.gridLineColor;
} else {
// This is the first line on the scale
ctx.lineWidth = this.lineWidth;
ctx.strokeStyle = this.lineColor;
}
linePositionY += helpers.aliasPixel(ctx.lineWidth);
ctx.moveTo(xStart, linePositionY);
ctx.lineTo(this.width, linePositionY);
ctx.stroke();
ctx.closePath();
ctx.lineWidth = this.lineWidth;
ctx.strokeStyle = this.lineColor;
ctx.beginPath();
ctx.moveTo(xStart - 5, linePositionY);
ctx.lineTo(xStart, linePositionY);
ctx.stroke();
ctx.closePath();
}, this);
each(this.xLabels, function (label, index) {
//======================================================
//apply the filter to the index if it is a function
//======================================================
if (typeof this.labelsFilter === "function" && this.labelsFilter(index)) {
return;
}
//Hack by Mike Walder to enforce X-Labels are Written horizontally
var xLabelRot = this.xLabelRotation;
this.xLabelRotation = 0;
//End of Hack
var xPos = this.calculateX(index) + aliasPixel(this.lineWidth),
// Check to see if line/bar here and decide where to place the line
linePos = this.calculateX(index - (this.offsetGridLines ? 0.5 : 0)) + aliasPixel(this.lineWidth),
//Mike Walder: isRotated nees original Roation Value to display the X-Label in the RollOver Area of a Datapoint
isRotated = true;(xLabelRot > 0);
ctx.beginPath();
if(this.scaleShowVerticalLines){
if (index > 0) {
// This is a grid line in the centre, so drop that
ctx.lineWidth = this.gridLineWidth;
ctx.strokeStyle = this.gridLineColor;
} else {
// This is the first line on the scale
ctx.lineWidth = this.lineWidth;
ctx.strokeStyle = this.lineColor;
}
ctx.moveTo(linePos, this.endPoint);
ctx.lineTo(linePos, this.startPoint - 3);
ctx.stroke();
ctx.closePath();
ctx.lineWidth = this.lineWidth;
ctx.strokeStyle = this.lineColor;
}
// Small lines at the bottom of the base grid line
ctx.beginPath();
ctx.moveTo(linePos, this.endPoint);
ctx.lineTo(linePos, this.endPoint + 5);
ctx.stroke();
ctx.closePath();
ctx.save();
ctx.translate(xPos, (isRotated) ? this.endPoint + 12 : this.endPoint + 8);
ctx.rotate(toRadians(this.xLabelRotation) * -1);
//Mike Walder added center here, because it looks better if the label designator is in the center of the smal line
ctx.textAlign = "center";
ctx.textBaseline = (isRotated) ? "middle" : "top";
ctx.fillText(label, 0, 0);
ctx.restore();
}, this);
}
}
});
Chart.types.Line.extend({
name: "LineAlt",
initialize: function (data) {
//======================================================
//ensure the new option is part of the options
//======================================================
this.options.labelsFilter = data.labelsFilter || null;
Chart.types.Line.prototype.initialize.apply(this, arguments);
},
buildScale: function (labels) {
var helpers = Chart.helpers;
var self = this;
var dataTotal = function () {
var values = [];
self.eachPoints(function (point) {
values.push(point.value);
});
return values;
};
var scaleOptions = {
// Mike Walder: added this configuration option since it is overridden in the new code
scaleShowVerticalLines: this.options.scaleShowVerticalLines,
templateString: this.options.scaleLabel,
height: this.chart.height,
width: this.chart.width,
ctx: this.chart.ctx,
textColor: this.options.scaleFontColor,
fontSize: this.options.scaleFontSize,
//======================================================
//pass this new options to the scale object
//======================================================
labelsFilter: this.options.labelsFilter,
fontStyle: this.options.scaleFontStyle,
fontFamily: this.options.scaleFontFamily,
valuesCount: labels.length,
beginAtZero: this.options.scaleBeginAtZero,
integersOnly: this.options.scaleIntegersOnly,
calculateYRange: function (currentHeight) {
var updatedRanges = helpers.calculateScaleRange(
dataTotal(),
currentHeight,
this.fontSize,
this.beginAtZero,
this.integersOnly);
helpers.extend(this, updatedRanges);
},
xLabels: labels,
font: helpers.fontString(this.options.scaleFontSize, this.options.scaleFontStyle, this.options.scaleFontFamily),
lineWidth: this.options.scaleLineWidth,
lineColor: this.options.scaleLineColor,
gridLineWidth: (this.options.scaleShowGridLines) ? this.options.scaleGridLineWidth : 0,
gridLineColor: (this.options.scaleShowGridLines) ? this.options.scaleGridLineColor : "rgba(0,0,0,0)",
padding: (this.options.showScale) ? 0 : this.options.pointDotRadius + this.options.pointDotStrokeWidth,
showLabels: this.options.scaleShowLabels,
display: this.options.showScale
};
if (this.options.scaleOverride) {
helpers.extend(scaleOptions, {
calculateYRange: helpers.noop,
steps: this.options.scaleSteps,
stepValue: this.options.scaleStepWidth,
min: this.options.scaleStartValue,
max: this.options.scaleStartValue + (this.options.scaleSteps * this.options.scaleStepWidth)
});
}
//======================================================
//Use the new Custom Scal that will make use of a labelsFilter function
//======================================================
this.scale = new Chart.CustomScale(scaleOptions);
}
});