chart.js插件生成折线图时数据普遍较大时Y轴数据不从0开始的解决办法[bubuko.com]

chart.js插件生成折线图时数据普遍较大时Y轴数据不从0开始的解决办法,原文:http://bubuko.com/infodetail-328671.html

默认情况下如下图

Y轴并不是从0开始,这样折现图的幅度会很大,不是正常的幅度,解决办法如下,

示例代码:


window.onload = function () {
            var ctx = document.getElementById("canvas").getContext("2d");
            window.myLine = new Chart(ctx).Line(lineChartData,  {
                scaleOverride :true ,   //是否用硬编码重写y轴网格线
                scaleSteps : 15,        //y轴刻度的个数
                scaleStepWidth : 300,   //y轴每个刻度的宽度
                scaleStartValue : 0,    //y轴的起始值
                pointDot : true,        //是否显示点
                pointDotRadius : 5,     //点的半径
                pointDotStrokeWidth : 1,//点的线宽
                datasetStrokeWidth : 3, //数据线的线宽
                animation : true,       //是否有动画效果
                animationSteps : 60    //动画的步数
                } );
        }

核心代码:



scaleOverride :true ,   //是否用硬编码重写y轴网格线
 scaleSteps : 15,        //y轴刻度的个数
scaleStepWidth : 300,   //y轴每个刻度的宽度
scaleStartValue : 0,    //y轴的起始值

这样就会得到下面的效果,Y轴从0开始


http://bubuko.com/analysis-201408.html

  • 1
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
首先,您需要编写一个后端API来从数据库中获取数据。这个API应该返回一个JSON格式的数据。例如,如果您使用PHP语言,可以编写以下代码: ```php <?php // 连接数据库 $servername = "localhost"; $username = "username"; $password = "password"; $dbname = "dbname"; $conn = mysqli_connect($servername, $username, $password, $dbname); // 检查连接 if (!$conn) { die("Connection failed: " . mysqli_connect_error()); } // 查询数据库 $sql = "SELECT * FROM mytable"; $result = mysqli_query($conn, $sql); // 处理查询结果 $data = array(); while($row = mysqli_fetch_assoc($result)) { $data[] = $row; } // 返回JSON格式的数据 header('Content-Type: application/json'); echo json_encode($data); // 关闭连接 mysqli_close($conn); ?> ``` 然后,您需要编写一个前端页面来使用Ajax从这个API获取数据并使用Chart.js绘制折线图。以下是一个基本的HTML和JavaScript代码示例: ```html <!DOCTYPE html> <html> <head> <title>Chart.js Example</title> <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.min.js"></script> </head> <body> <canvas id="myChart"></canvas> <script> // 使用Ajax从后端API获取数据 var xhr = new XMLHttpRequest(); xhr.open('GET', 'api.php'); xhr.onload = function() { if (xhr.status === 200) { var data = JSON.parse(xhr.responseText); // 使用Chart.js绘制折线图 var ctx = document.getElementById('myChart').getContext('2d'); var myChart = new Chart(ctx, { type: 'line', data: { labels: data.map(function(item) { return item.date; }), datasets: [{ label: 'My Dataset', data: data.map(function(item) { return item.value; }), fill: false, borderColor: 'rgb(75, 192, 192)', tension: 0.1 }] }, options: { scales: { yAxes: [{ ticks: { beginAtZero: true } }] } } }); } else { console.log('Request failed. Returned status of ' + xhr.status); } }; xhr.send(); </script> </body> </html> ``` 您需要根据自己的实际情况修改这些代码,以适应您的数据库结构和数据格式。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值