Question

我已经使用如下所示的chartjs库创建了条形图。我们事先不知道会有多少个x点，因此我想显示一定数量的x点，如果它大于此点，我希望图表可以滚动。请注意，我希望条形尺寸为原始尺寸，并且不希望由于大量x数据点而缩小（而是使条形图可滚动）。

这是我为不可滚动js图表（可行的）所做的全部工作：

var color = Chart.helpers.color;
        var barChartData = {
            labels: [{% for x in xticks %}
                "{{x}}",
            {% endfor %}],
            datasets: [{
                type: 'bar',
                label: '#Annotation',
                backgroundColor: color(window.chartColors.green).rgbString(),
                borderColor: window.chartColors.green,
                data: [
                    {% for num in num_tasks %}
                        {{num}},
                    {% endfor %}
                ],
                yAxisID: 'y-axis-1',
            }
                , {
                    data: [
                        {% for dur in durations %}
                            {{dur}},
                        {% endfor %}
                    ],
                    yAxisID: 'y-axis-2',
                    label: "Duration",
                    fillColor: "green"
                }]
        };


var ctx = document.getElementById('canvas').getContext('2d');
                window.myBar = new Chart(ctx, {
                    type: 'bar',
                    data: barChartData,
                    responsive: true,
                    maintainAspectRatio:false,
                    options: {
                        responsive: true,
                        tooltips: {
                            mode: 'index',
                            intersect: false
                        },
                        scales: {
                            xAxes: [{
                                display: true,
                                offset: true,
                                scaleLabel: {
                                    display: true,
                                    labelString: '{{ frequencies[freq] }}'
                                }
                            }],
                            yAxes: [{
                                type: 'linear',
                                display: true,
                                position: 'left',
                                id: 'y-axis-1',
                                ticks: {
                                    beginAtZero: true
                                },
                                scaleLabel: {
                                    display: true,
                                    labelString: 'Count'
                                }
                            },
                                {
                                    type: 'linear', 
                                    display: true,
                                    position: 'right',
                                    id: 'y-axis-2',
                                    ticks: {
                                        beginAtZero: true
                                    },
                                    scaleLabel: {
                                        display: true,
                                        labelString: 'Duration in seconds'
                                    }
                                }],
                        },

                    }
                });
            };

所以现在我的问题是，如果x的数据点数（即len（xticks））大于一定数量，该如何向水平轴添加可滚动功能？换句话说，如果水平数据不能容纳在具有一定宽度的容器中，则仅具有滚动选项。在容器中显示所有数据的问题是，条变得很小以适合画布容器。

chartJS水平可伸缩

0 个答案: