Pagination in Bar chart using ChartJS

问题

I am using chartJS for display some data with Bar Chart. there are some issues with chartJs. When i have to much data-filed for example 100 or more data-field and it have long lasting label its looks like ugly.

how to config bar chart ?

here is my bar chart screenshot

here is my FIDDLE

in above example i have 100 data-filed, can i paginate this bar-chart ?

here is my code

var lbl = [];
var dt = [];
for(var i = 1;i<=100;i++){
 lbl.push("this_is_my_lable_name_"+i);
}
for(var i = 1;i<=100;i++){
  dt.push(Math.floor((Math.random() * 100) + 1));
}
var ctx = document.getElementById("myChart");
var myChart = new Chart(ctx, {
    type: 'bar',
    data: {
        labels: lbl,
        datasets: [{
            label: '# of Votes',
            data: dt,
            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: {
        scales: {
            yAxes: [{
                ticks: {
                    beginAtZero:true
                }
            }]
        }
    }
});

回答1:

You can try this solution to consider the chart scroll like this:

Clone a different canvas for y axis so that when you scroll then only bars will appear to move

Adding the canvas for y axis

 <canvas id="myChartAxis" height="600" width="0"></canvas>

Now cloning the axis

 var sourceCanvas = myLiveChart.chart.canvas;
 var copyWidth = myLiveChart.scales['y-axis-0'].width - 10;
 var copyHeight = myLiveChart.scales['y-axis-0'].height + myLiveChart.scales['y-axis-0'].top + 10;
 var targetCtx = document.getElementById("myChartAxis").getContext("2d");
 targetCtx.canvas.width = copyWidth;
 targetCtx.drawImage(sourceCanvas, 0, 0, copyWidth, copyHeight, 0, 0, copyWidth, copyHeight);

For a Demo see this FIDDLE

For better visualization its better to avoid labels in x axis and show this info intuitive via tool tip anyhow

回答2:

You could wrap the canvas with a wrapper class and change its width accordingly which suites you the best. also, if you don't want the chart to cover entire screen, you can wrap it with another wrapper class.

var lbl = [];
var dt = [];
for (var i = 1; i <= 100; i++) {
    lbl.push("this_is_my_lable_name_" + i);
}
for (var i = 1; i <= 100; i++) {
    dt.push(Math.floor((Math.random() * 100) + 1));
}
var ctx = document.getElementById("myChart");
var myChart = new Chart(ctx, {
    type: 'bar',
    data: {
        labels: lbl,
        datasets: [{
            label: '# of Votes',
            data: dt,
            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: {
        scales: {
            yAxes: [{
                ticks: {
                    beginAtZero: true
                }
            }]
        }
    }
});

.wrapper {
  width: 600px;
  height: 400px;
  overflow-x: scroll;
}
.chartWrapper {
  width: 6000px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.min.js"></script>
<div class="wrapper">
    <div class="chartWrapper">
        <canvas id="myChart" height="19"></canvas>
    </div>
</div>

_JSFiddle

来源：https://stackoverflow.com/questions/43248520/pagination-in-bar-chart-using-chartjs

标签

javascript

jquery

css

bar-chart

chart.js