如何在图表JS中使用单个Y比例到双水平条

时间:2018-08-22 16:38:45

标签: javascript charts chart.js

我有一个带有双水平条的图表,它们分别代表不同的y比例。

我已经阅读了文档,一些教程,但没有看到任何内容。

我想对这两个条使用一个y刻度。

有人可以帮助我吗?

  

var canvas = document.getElementById('clintesContatadosChart');

    var lineChartData2 = {
        labels: data.nome,
        datasets: [
            {
                label: "Total Clients",
                backgroundColor: '#5793cb',
                borderColor: '#80abec',
                borderWidth: 1,
                hoverBackgroundColor: ["#66A2EB", "#FCCE56"],
                data: data.clientes,
                xAxisID: 'x1',
                // yAxisID: 'first-y-axis'
            }, 
            {
                label: "Clientes Contact",
                backgroundColor: '#f9c5c5',
                borderColor: '#f9c5c5',
                borderWidth: 1,
                hoverBackgroundColor: ["#66A2EB", "#FCCE56"],
                data: data.contatos_realizados,
                xAxisID: 'x2',
            }
        ]
    };

    var option = {
            tooltips: {
                enabled: true
            },
            hover: {
                animationDuration: 1
            },
            animation: {
                duration: 1,
                onComplete: function () {
                    var chartInstance = this.chart,
                        ctx = chartInstance.ctx;
                    ctx.textAlign = 'center';
                    ctx.fillStyle = "rgba(0, 0, 0, 1)";
                    ctx.textBaseline = 'bottom';

                    this.data.datasets.forEach(function (dataset, i) {
                        var meta = chartInstance.controller.getDatasetMeta(i);
                        meta.data.forEach(function (bar, index) {
                            var data = dataset.data[index];
                            ctx.fillText(data, bar._model.x + 10, bar._model.y + 7);

                        });
                    });
                }
            },
            scales: {
                yAxes: [{   
                    gridLines: {
                        display: false,
                        color: "rgba(255,99,132,0.2)"
                    },
                    ticks: {
                        beginAtZero: true,
                        min: 0,
                        autoSkip: true,
                    }
                }],
                xAxes: [{
                    id: 'x1',
                    gridLines: {
                        display: false
                    },
                    ticks: {
                        display: true,
                    }
                }, {
                    id: 'x2',
                    type: 'linear',
                    position: 'bottom',
                    gridLines: {
                        display: false
                    },
                    ticks: {
                        display: true
                    }
                }]
            }
        }

    var ctx = document.getElementById("clintesContatadosChart").getContext('2d');
    var myLineChart2 = new Chart(ctx, {
        type: 'horizontalBar',
        data: lineChartData2,
        options: option
    });

0 个答案:

没有答案