堆积水平条形图:如何获得条形宽度?

时间:2017-04-12 09:11:17

标签: javascript bar-chart chart.js stacked-chart

如何获得此代码段中条形图/框的宽度: http://jsfiddle.net/zk9oc4c9/ 确定酒吧的y位?

在上面的小提琴中使用了1.x版本,但在版本2.x中this.chart.ctx.moveTo(0, this.scale.calculateY(lineHeight));是不可能的。

有了这种坐标,我想在图表中画一条线。使用静态值绘制(虚拟数据)有效,但我需要动态地使用id。 因此,请查看截图如何使用行的静态值来查看图表。虚线的y坐标很简单 - 只是图表的边框。 但我的意思是红色实线。

enter image description here

所以我写了一个插件,这是画线的部分 - 这只是一个摘录:

Chart.plugins.register({
    afterDatasetsDraw: function(chartInstance, easing) {
        var coord = {
            x: // this calculation is already done,
            startY: 0,
            endY: 0
        };

        // actually draw the line
        ctx.beginPath();
        ctx.moveTo(coord.x, coord.startY);
        ctx.lineTo(coord.x, coord.endY);
        ctx.stroke();
        ctx.closePath();
    }
});

修改 我做了某种解决方案。这有点像变通方法,但它确实有效:

Chart.plugins.register({
    afterDatasetsDraw: function(chartInstance, easing) {
        // get the meta from any dataset
        var meta = chartInstance.getDatasetMeta(0);
        var xScale = chartInstance.scales[meta.xAxisID];

        var coord = {
            x: xScale.getPixelForValue(<value for the line>);
            startY: 0,
            endY: 0
        };

        var yScale = chartInstance.scales[meta.yAxisID];
        // get the height of the y-axis  - subtract the top padding for the chart here
        var height = yScale.bottom - yScale.top;
        // get categoryPercentage & barPercentage from the chart's configuration
        var catPerc = yScale.options.categoryPercentage;
        var barPerc = yScale.options.barPercentage;

        // calculate the each category height
        var catHeight = (height * catPerc) / yScale.ticks.length;
        // so calculate the height of a single bar
        var barHeight = catHeight * barPerc;

        var factor = barHeight / catHeight;

        // padding between chat edge and the bar itself
        var padding = (catHeight - barHeight) * factor;
        // use the top value from which the chart itself is rendered + the padding
        coord.startY = yScale.top + padding - 2;
        coord.endY = coord.startY + barHeight + 3;

        // actually draw the line
        ctx.beginPath();
        ctx.moveTo(coord.x, coord.startY);
        ctx.lineTo(coord.x, coord.endY);
        ctx.stroke();
        ctx.closePath();
    }
});

0 个答案:

没有答案