javascript - Pagination in Bar chart using ChartJS - Stack Overflow

admin管理员组

文章数量:1305299

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
                }
            }]
        }
    }
});

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
                }
            }]
        }
    }
});

• javascript
• jquery
• css
• bar-chart
• chart.js

Share Improve this question Follow asked Apr 6, 2017 at 7:30 Kaushik MakwanaKaushik Makwana 2,5761010 gold badges3737 silver badges5555 bronze badges 1

• Unfortunately, there a pagination capability built into chart.js. However, there is a plugin called chartjs-plugin-zoom that could work for you, but you will need to extend it to make some changes. Checkout this codepen for an example. You can use your mousewheel to scroll into the chart and then click and drag to pan left/right. Currently there is no way to pre-set the initial zoom, but you could extend the plugin to add that feature (shouldn't be too difficult). If this works for your needs then let me know and I'll submit as answer – jordanwillis Commented Apr 6, 2017 at 15:09

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 5

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

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./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

本文标签： javascriptPagination in Bar chart using ChartJSStack Overflow