javascript - Chart.js 响应式 css 大小

Question

所以我在我的网站上制作了这个 chart.js，但我的一位用户说：The new bars showing the status for run tests is now too narrow, making it almost impossible to identify which one is hovered over.

如何使其尺寸更好地适应 3440x1440 屏幕，在 Chrome 中缩放为 100%？

考虑过使css大小为80%宽度，然后没有高度。所以它会适合页面，但在 3440x1440 屏幕上是一个非常长的图表。

图表是这样的：

.canvasStyle {         
    height: 400px;
    width: 900px;
}

<div class="row justify-content-center">
    <div class="canvasStyle">
        <canvas id='chart_1' ></canvas>
    </div>
</div>
<script>
    var TestInformation = <?php echo json_encode($TestInformation); ?>;
    var pass            = <?php echo json_encode($pass);            ?>;
    var fail            = <?php echo json_encode($fail);            ?>;
    var error           = <?php echo json_encode($error);           ?>;
    var notrun          = <?php echo json_encode($notrun);          ?>;
    var na              = <?php echo json_encode($na);              ?>;
    var version         = <?php echo json_encode($version);         ?>;
    var title           = <?php echo json_encode($title);           ?>;
    searchId_chart(title, TestInformation, pass, fail, error, notrun, error, na);
</script>

function searchId_chart(title, TestInformation, pass, fail, error, notrun, error, na) {
    // Display the array elements
    window.onload = function() {

        var xValues = TestInformation;

        new Chart("chart_1", {
            type: 'bar',
            data: {
                labels: xValues,
                datasets: [{
                        label: 'Passed',
                        data: pass,
                        backgroundColor: 'rgb(150,238,144)'
                    },
                    {
                        label: 'Failed',
                        data: fail,
                        backgroundColor: 'rgb(204,0,0)'
                    },
                    {
                        label: 'Not Run',
                        data: notrun,
                        backgroundColor: 'rgb(0,109,204)'
                    },
                    {
                        label: 'Error',
                        data: error,
                        backgroundColor: 'rgb(204,112,0)'
                    },
                    {
                        label: 'NA',
                        data: na,
                        backgroundColor: 'rgb(33,33,33)'
                    }
                ]
            },
            options: {
                title: {
                    display: true,
                    text: title
                },
                tooltips: {
                    mode: 'index',
                    intersect: false,
                },
                hover: {
                    mode: 'nearest',
                    intersect: true
                },
                maintainAspectRatio: false,
                scales: {
                    xAxes: [{
                        stacked: true,
                        ticks: {
                            stepSize: 1,
                            min: 0,
                            autoSkip: false,
                            display: false
                        }
                    }],
                    yAxes: [{
                        stacked: true,
                        ticks: {
                            maxTicksLimit: 5,
                            min: 0,
                            beginAtZero: true,
                            userCallback: function(label, index, labels) {
                                if (Math.floor(label) === label) {
                                    return label;
                                }

                            },
                        }
                    }]
                }

            }
        });
    };
}

标签： javascripthtmlcsschart.js

Answer 1

好的，你有它：

var ctx = document.getElementById('myChart').getContext('2d');
var myChart = new Chart(ctx, {
    type: 'bar',
    data: {
        labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],
        datasets: [{
            label: '# of Votes',
            data: [12, 19, 3, 5, 2, 3],
            backgroundColor: [
                'rgba(255, 99, 132, 0.2)',
                'rgba(54, 162, 235, 0.2)',
                'rgba(255, 206, 86, 0.2)',
                'rgba(75, 192, 192, 0.2)',
                'rgba(153, 102, 255, 0.2)',
                'rgba(255, 159, 64, 0.2)'
            ],
            borderColor: [
                'rgba(255, 99, 132, 1)',
                'rgba(54, 162, 235, 1)',
                'rgba(255, 206, 86, 1)',
                'rgba(75, 192, 192, 1)',
                'rgba(153, 102, 255, 1)',
                'rgba(255, 159, 64, 1)'
            ],
            borderWidth: 1
        }]
    },
    options: {
      responsive:true,
      maintainAspectRatio:false,
        scales: {
            y: {
                beginAtZero: true
            }
        }
    }
});

.overflow-auto-size{
  width:400px;
  heigth:50px;
  overflow:auto;
}
.big{
  width:1000px;
  heigth:50px;
}

<script src="https://cdn.jsdelivr.net/npm/chart.js@3.4.1/dist/chart.min.js"></script>
<div class="overflow-auto-size">
    <div class="big">
        <canvas id="myChart"></canvas>
    </div>
</div>