How to make chart horizontally scrollable

僤鯓⒐⒋嵵緔 提交于 2021-02-10 14:53:31

问题


I am using this chart library https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.3.0/Chart.min.js" and I have success to show the chart data, but I cannot make it scrollable horizontally. How to make it scroll? I've tried all the way

<div class="wrapper" style="background-color: whitesmoke; ">
    <div class="chartAreaWrapper" style="width: 550px; overflow:scroll;">
        <canvas id="myChart" width="1600" height="900"></canvas>
    </div>
</div>

this one of them, and this the javascript

var years = [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,25,26,27,28,29,30];
// For drawing the lines
var africa = [86,114,106,106,107,111,133,221,783,2478];
var asia = [282,350,411,502,635,809,947,1402,3700,5267];

var ctx = document.getElementById("myChart");
var myChart = new Chart(ctx, {
type: 'line',
data: {
    labels: years,
    datasets: [
    { 
        data: africa,
        label: "Africa",
        borderColor: "#3e95cd",
        fill: false
    },
    { 
        data: asia,
        label: "Asia",
        borderColor: "#8e5ea2",
        fill: false
    }
    ]
}
});

来源:https://stackoverflow.com/questions/53041491/how-to-make-chart-horizontally-scrollable

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!