在Chart.js中为Linechart添加第二个Y轴? [英] Add a second Y-axis for Linechart in Chart.js?

问题描述

我想在折线图上(可能在canvas的右侧)添加第二个Y-axis.我尝试使用取自 https://github.com/的Chart.js定义了LineDoubleY的Wikunia/Chart.js/tree/Double-Y轴. 但是:

I would like to add a second Y-axis on a linechart, possibly on the right side of the canvas. I tried to use Chart.js taken from https://github.com/Wikunia/Chart.js/tree/Double-Y-Axis in which LineDoubleY is defined. But:

1. 我在Firefox上看不到该示例:

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

ReferenceError: xPos is not defined Chart.js:1147:7

1. 如果我在应用中使用此Chart.js:

currentChart.addData不是函数

currentChart.addData is not a function

这说:是否可以用另一种方式添加第二个Y-axis?

This said: Is it possible to add a second Y-axis in another way?

推荐答案

此处是原始的修订版，其中多一点灵活性.逻辑几乎相同，但扩展到2个以上的数据集

Here is a revised version of the original with a little more flexibility. The logic is pretty much the same, but extended to more than 2 datasets

预览

脚本

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).例如

You send a dataset to the y2 axis with an additional property (y2axis: true). For example

{
    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值.例如

You could use one shade of colors for the series on the y axes and another for colors on the y2 axes (otherwise it's a bit confusing). Additionally you could modify your tooltip function to show the y2 values a bit differently. For example

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

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

would put square brackets around y2 values in the tooltip

如果您要使用addData向数据集中添加新点，则会出现 issue ，而在必须通过更新addData函数来解决的新添加的点中，数据集标签未更新.

If you are adding new points to the datasets using addData, there is an issue with dataset labels not being updated in the newly added points that you have to work around by updating the addData function.

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

If you don't want to do that just use the dataset point colors (instead of using dataset labels) to distinguish between the y and y2 series IF you use distinct point colors for y and y2 series. Here are the lines to substitute in

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

您以前有y2datasets

这篇关于在Chart.js中为Linechart添加第二个Y轴?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！