在Chart.js中为Linechart添加第二个Y轴？

这是原始版本的修订版，具有更多的灵活性。逻辑几乎相同，但扩展到两个以上的数据集

预习

脚本

Chart.types.Line.extend({
    name: "Line2Y",
    getScale: function(data) {
        var startPoint = this.options.scaleFontSize;
        var endPoint = this.chart.height - (this.options.scaleFontSize * 1.5) - 5;
        return Chart.helpers.calculateScaleRange(
            data,
            endPoint - startPoint,
            this.options.scaleFontSize,
            this.options.scaleBeginAtZero,
            this.options.scaleIntegersOnly);
    },
    initialize: function (data) {
        var y2datasetLabels = [];
        var y2data = [];
        var y1data = [];
        data.datasets.forEach(function (dataset, i) {
            if (dataset.y2axis == true) {
                y2datasetLabels.push(dataset.label);
                y2data = y2data.concat(dataset.data);
            } else {
                y1data = y1data.concat(dataset.data);
            }
        });

        // use the helper function to get the scale for both datasets
        var y1Scale = this.getScale(y1data);
        this.y2Scale = this.getScale(y2data);
        var normalizingFactor = y1Scale.max / this.y2Scale.max;

        // update y2 datasets
        data.datasets.forEach(function(dataset) {
            if (y2datasetLabels.indexOf(dataset.label) !== -1) {
                dataset.data.forEach(function (e, j) {
                    dataset.data[j] = e * normalizingFactor;
                })
            }
        })

        // denormalize tooltip for y2 datasets
        this.options.multiTooltipTemplate = function (d) {
            if (y2datasetLabels.indexOf(d.datasetLabel) !== -1) 
                return Math.round(d.value / normalizingFactor, 6);
            else 
                return d.value;
        }

        Chart.types.Line.prototype.initialize.apply(this, arguments);
    },
    draw: function () {
        this.scale.xScalePaddingRight = this.scale.xScalePaddingLeft;
        Chart.types.Line.prototype.draw.apply(this, arguments);

        this.chart.ctx.textAlign = 'left';
        this.chart.ctx.textBaseline = "middle";
        this.chart.ctx.fillStyle = "#666";
        var yStep = (this.scale.endPoint - this.scale.startPoint) / this.y2Scale.steps
        for (var i = 0, y = this.scale.endPoint, label = this.y2Scale.min; 
             i <= this.y2Scale.steps; 
             i++) {
                this.chart.ctx.fillText(label, this.chart.width - this.scale.xScalePaddingRight + 10, y);
                y -= yStep;
                label += this.y2Scale.stepValue
        }
    }
});

使用附加属性将数据集发送到y2轴（y2axis：true）。例如

{
    label: "My Second dataset",
    fillColor: "rgba(151,187,205,0.5)",
    strokeColor: "rgba(151,187,205,1)",
    pointColor: "rgba(151,187,205,1)",
    pointStrokeColor: "#fff",
    data: [150, 48, 120, 19, 46, 27, 100],
    y2axis: true
}

小提琴-http: //jsfiddle.net/1va2kx18/

您可以在y轴上为该系列使用一种颜色的阴影，而在y2轴上可以为另一种颜色使用的颜色（否则有点令人困惑）。另外，您可以修改您的工具提示功能以显示y2值。例如

return '[' + Math.round(d.value / normalizingFactor, 6) + ']';

将在工具提示中的y2值周围放置方括号

如果要使用addData将新点添加到数据集中，则存在一个问题，即必须通过更新addData函数来解决的新添加点中的数据集标签未更新。

如果您不想这样做，则仅使用数据集点颜色（而不是使用数据集标签）来区分y和y2系列，如果您对y和y2系列使用不同的点颜色。这是要替换的行

 var y2datasetColors = [];
 ...
 y2datasetColors.push(dataset.pointColor);
 ...
 if (y2datasetColors.indexOf(dataset.pointColor) !== -1) {
 ...
 if (y2datasetColors.indexOf(d._saved.fillColor) !== -1) 

你以前有过 y2datasets