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

Question

我想在线图上添加第二Y-axis个,可能在右侧canvas.我试图用Chart.js取自https://github.com/Wikunia/Chart.js/tree/Double-Y-Axis中LineDoubleY定义.但:

1. 我在Firefox上看不到这个例子:

ReferenceError:xPos未定义Chart.js:1147:7

2. 如果我Chart.js在我的应用中使用它:

currentChart.addData不是函数

这说:是否有可能以Y-axis另一种方式增加一秒？

Answer 1

这是原版的修订版,具有更大的灵活性.逻辑几乎相同,但扩展到超过2个数据集

预习

脚本

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

您使用附加属性(y2axis:true)将数据集发送到y2轴.例如

{
    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