如何自定义水平条形图

Question

[嘿，我制作了水平条形图，但我想进行一些自定义，我尝试了很多失败的方法。这是我想要的输出。

我从未在图表上工作过，没有任何可能的建议或答案？我想要精确的图像，例如输出，包括顶部标签和底部标签，还包括图形上方的线

        var barOptions_stacked = {
    tooltips: {
        enabled: false
    },
    hover :{
        animationDuration:0
    },
    scales: {
        xAxes: [{
            ticks: {
                display:false,
                beginAtZero:true,
                fontFamily: "'Open Sans Bold', sans-serif",
                fontSize:20
            },
            scaleLabel:{
                display:false
            },
            gridLines: {
            }, 
            stacked: true
        }],
        yAxes: [{
            gridLines: {
                display:false,
                color: "#fff",
                zeroLineColor: "#fff",
                zeroLineWidth: 0
            },
            ticks: {
                display:false,
                fontFamily: "'Open Sans Bold', sans-serif",
                fontSize:20
            },
            stacked: true
        }]
    },
    legend:{
        display:false
    },
    
    animation: {
        onComplete: function () {
            var chartInstance = this.chart;
            var ctx = chartInstance.ctx;
            ctx.textAlign = "left";
            ctx.font = "19px Open Sans";
            ctx.fillStyle = "#fff";

            Chart.helpers.each(this.data.datasets.forEach(function (dataset, i) {
                var meta = chartInstance.controller.getDatasetMeta(i);
                Chart.helpers.each(meta.data.forEach(function (bar, index) {
                    data = dataset.data[index];
                    if(i==0){
                        ctx.fillText(data, 50, bar._model.y+4);
                    } else {
                        ctx.fillText(data, bar._model.x-25, bar._model.y+4);
                    }
                }),this)
            }),this);
        }
    },
    pointLabelFontFamily : "Quadon Extra Bold",
    scaleFontFamily : "Quadon Extra Bold",
};

var ctx = document.getElementById("Chart4");
        if(ctx){
            ctx.height=20;
var myChart = new Chart(ctx, {
    type: 'horizontalBar',
    data: {
        labels: [" "],
        
        datasets: [{
            data: [24,0],
            backgroundColor: "#D5C9F7",
            hoverBackgroundColor: "#c8baf2"
        },{
            data: [16,0],
            backgroundColor: "#61BDDB",
            hoverBackgroundColor: "rgba(46,185,235,1)"
        }]
    },

    options: barOptions_stacked,
});
        }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.8.0/Chart.bundle.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.8.0/Chart.bundle.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.8.0/Chart.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.8.0/Chart.min.js"></script>
<canvas id="Chart4"></canvas>

Answer 1

您可以使用图表创建自定义div

 var barOptions_stacked = {
            tooltips: {
                enabled: false
            },
            hover: {
                animationDuration: 0
            },
            scales: {
                xAxes: [{
                    ticks: {
                        display: false,
                        beginAtZero: true,
                        fontFamily: "'Open Sans Bold', sans-serif",
                        fontSize: 20
                    },
                    scaleLabel: {
                        display: false
                    },
                    gridLines: {
                        display: false
                    },
                    ticks: {
                        display: false
                    },
                    stacked: true
                }],
                yAxes: [{
                    position: 'right',

                    gridLines: {
                        display: false,
                        color: "#fff",
                        zeroLineColor: "#fff",
                        zeroLineWidth: 0
                    },
                    ticks: {
                        display: false,
                        fontFamily: "'Open Sans Bold', sans-serif",
                        fontSize: 20
                    },
                    stacked: true
                }]
            },
            legend: {
                display: false
            },

            pointLabelFontFamily: "Quadon Extra Bold",
            scaleFontFamily: "Quadon Extra Bold",
        };

        var ctx = document.getElementById("Chart4");
        if (ctx) {
            ctx.height = 20;
            var myChart = new Chart(ctx, {
                type: 'horizontalBar',
                data: {
                    labels: [" "],

                    datasets: [{
                        data: [24, 0],
                        backgroundColor: "#D5C9F7",
                        hoverBackgroundColor: "#c8baf2"
                    }, {
                        data: [16, 0],
                        backgroundColor: "#61BDDB",
                        hoverBackgroundColor: "rgba(46,185,235,1)"
                    }]
                },

                options: barOptions_stacked,
            });
        }
  

<center>
                                             <div style="    width: 10%;
    left: 45%;
    right: 54%;
    position: absolute;
    font-size: 56px;
    top: 0%;
    color: #000000;">40</div>
                                            <div style="    width: 10%;
    left: 45%;
    right: 54%;
    position: absolute;
    font-size: 24px;
    top: 20%;
    color: #c8baf2;">Total Covers</div>

                                            <div class="verticalLine" style="left: 50%;
    right: 50%;
    position: absolute;
    height: 20px;
    border-left: 3px solid #c8baf2;
    top:33%"></div>

                                            <hr style="border-top: 3px solid #c8baf2;
    top: 34%;
    color: #C8BAF2;
    width: 97%;
    position: absolute;">
                                            <canvas id="Chart4" style="position: absolute;top: 50%;bottom: 50%;"></canvas>
                                            <div class="verticalLine" style="left: 78%;
    
    position: absolute;
    height: 32px;
    border-left: 3px solid #2EB9EB;
    top:67%;"></div>
                                            <div style="right: 77%;
    position: absolute;
    font-size: 32px;
    top: 75%;
    color: #c8baf2;">24</div>
                                            <div style="right: 74%;
    position: absolute;
    font-size: 18px;
    top: 87%;
    color: #c8baf2;">Phone/In-house</div>

                                            <div class="verticalLine" style="    right: 78%;
    position: absolute;
    height: 32px;
    border-left: 3px solid #C8BAF2;
    top:67%;"></div>
                                                                    <div style="left: 77%;
    position: absolute;
    font-size: 32px;
    top: 75%;
    color: #2EB9EB;">16</div>
                                            <div style="left: 77%;
    position: absolute;
    font-size: 18px;
    top: 87%;
    color: #2EB9EB;">Online</div>

                                        </center>
                                         <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.8.0/Chart.bundle.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.8.0/Chart.bundle.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.8.0/Chart.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.8.0/Chart.min.js"></script>