使 chart.js 中的 X 轴标签按一定比例递增

2022-01-22 00:00:00 javascript chart.js

我的标签范围从 50 到 90，并且显示了介于两者之间的每个数字.

I have labels ranging from 50-90, and every number in between in displayed.

我想按 5 或 10 列出标签，因为目前它们都被挤在一起了.

I would like to list the labels by 5 or 10 because currently they are all crunched together.

它还使y轴的左侧部分被切断.

It also make the left part of the y-axis cut off.

推荐答案

编辑 2:好的，所以我实际上在我正在处理的项目中需要这样的功能，所以我制作了 chart.js 的自定义构建包括此功能.http://jsfiddle.net/leighking2/mea767ss/ 或 https://github.com/leighquince/Chart.js

它是以下两种解决方案的组合，但与 CHart.js 的核心相关，因此无需指定自定义比例和图表.

It's a combination of the two solutions below but tied into the core of CHart.js so no need to specify custom scale and charts.

折线图和条形图都有一个名为

Both line and bar charts have a new option called

labelsFilter:function(label, index){return false;)

默认情况下，这只会返回 false，因此 x 轴上的所有标签都会显示，但如果过滤器作为选项传递，那么它将过滤标签

by default this will just return false so all labels on the x-axis will display but if a filter is passed as an option then it will filter the labels

所以这里是一个同时有条和线的例子

so here is an example with both bar and line

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>

原始答案

您可以覆盖比例绘制功能来实现这一点.唯一我不喜欢的是它会应用于你的所有图表，所以另一个选择是有一个使用覆盖绘制的自定义图表类型.

You can override the scale draw function to achieve this. Only thing i don;t like about this is it will apply to all your graphs so the other option is to have a custom graph type that makes use of the overridden draw.

编辑 1:刚刚意识到可以通过使用索引值而不是标签来实现相同的效果，然后这可以应用于所有标签类型，而不仅仅是数字类型，这适用于示例和可以很容易地改变.这是使用索引而不是标签的第二个示例 http://jsfiddle.net/leighking2/n9c8jx55/

1st - 覆盖比例绘制函数 http://jsfiddle.net/leighking2/96grgz0d/一个>

这里唯一的变化是在绘制 x 轴标签之前，我们测试标签是否为数字，以及其除以 5 时的余数是否不等于 0(因此任何数字都不能被 5 整除)如果它符合这两个标准，我们就不会绘制标签

Only change here is before drawing the x-axis label we test if the label is a number and if its remainder when divided by 5 is not equal to 0 (so any number not dividable by 5) if it matches both those criteria we do not draw the label

Chart.Scale = Chart.Scale.extend({
   draw : function(){
           console.log(this);
           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){
                    //================================
                    //test to see if we draw the label
                    //================================
                    if(typeof label === "number" && label%5 != 0){
                     return;   
                    }
                    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),
                        isRotated = (this.xLabelRotation > 0);

                    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;
                    }
                    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);

                    ctx.textAlign = (isRotated) ? "right" : "center";
                    ctx.textBaseline = (isRotated) ? "middle" : "top";
                    ctx.fillText(label, 0, 0);
                    ctx.restore();

                },this);

            }
        } 
});

然后我们可以像平常一样使用图表.声明数据

then we can use the graphs like normal. Declare data

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.2)",
        strokeColor: "rgba(220,220,220,1)",
        pointColor: "rgba(220,220,220,1)",
        pointStrokeColor: "#fff",
        pointHighlightFill: "#fff",
        pointHighlightStroke: "rgba(220,220,220,1)",
        data: [65, 34, 21, 11, 11, 34, 34, 12, 24, 45, 65, 34, 21, 11, 11, 34, 34, 12, 24, 45, 65, 34, 21, 11, 11, 34, 34, 12, 24, 45]
    }, ]
};

画图

var myLineChart = new Chart(ctx).Line(data);

第二个自定义图形+自定义比例+过滤函数 http://jsfiddle.net/leighking2/6xej5ek3/

在这种方法中，我们仍然需要创建一个自定义比例对象，但是我们可以选择仅将其应用于我们已声明的那些图表，而不是将其应用于我们创建的所有图表.同样在这个例子中，我们还可以让过滤器成为一个在运行时应用的函数，这样我们就可以让每个图形对标签进行不同的过滤

In this method we still need to create a custom scale object but instead of having this applied to all charts we create we can choose to only apply it to those that we have declared. Also in this example we can also have the filter be a function that gets applied at run time so we can have each graph filter the labels differently

首先是比例对象

Chart.CustomScale = Chart.Scale.extend({
    draw: function () {
        console.log(this);
        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 the the label if it is a function
                //======================================================
                if (typeof this.labelsFilter === "function" && this.labelsFilter(label)) {
                    return;
                }
                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),
                    isRotated = (this.xLabelRotation > 0);

                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;
                }
                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);

                ctx.textAlign = (isRotated) ? "right" : "center";
                ctx.textBaseline = (isRotated) ? "middle" : "top";
                ctx.fillText(label, 0, 0);
                ctx.restore();

            }, this);

        }
    }
});

现在将使用此比例的自定义图形，相当烦人的是，我们必须覆盖整个 buildscale 函数

now the custom graph that will make use of this scale, rather annoyingly we have to override the whole of the buildscale function

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 = {
            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);
    }
});

那么我们就可以像平常一样使用它了.声明数据，但这次为 labelsFilter 传递了一个新选项，这是一个应用 x 个标签过滤的函数

then we can use it like normal. Declare the data but this time pass a new option for labelsFilter that is a function to apply the filtering of the x labels

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],
    labelsFilter: function (label) {
        //return true if this label should be filtered out
        return label % 5 !== 0;
    },
    datasets: [{
        label: "My First dataset",
        fillColor: "rgba(220,220,220,0.2)",
        strokeColor: "rgba(220,220,220,1)",
        pointColor: "rgba(220,220,220,1)",
        pointStrokeColor: "#fff",
        pointHighlightFill: "#fff",
        pointHighlightStroke: "rgba(220,220,220,1)",
        data: [65, 34, 21, 11, 11, 34, 34, 12, 24, 45, 65, 34, 21, 11, 11, 34, 34, 12, 24, 45, 65, 34, 21, 11, 11, 34, 34, 12, 24, 45]
    }, ]
};

然后使用我们新的自定义图形名称绘制图形

then draw the graph using our new custom graph name

var myLineChart = new Chart(ctx).LineAlt(data);

总体而言，尽管涉及更多，但我更喜欢第二种方法，因为这意味着可以将自定义过滤器应用于我声明的每个图.

Overall even though it is a bit more involved i prefer the second method as it means that a custom filter can be applied to each graph i declare.

相关文章