1. 程式人生 > >chart.js外掛生成折線圖時資料普遍較大時Y軸資料不從0開始的解決辦法[bubuko.com]

chart.js外掛生成折線圖時資料普遍較大時Y軸資料不從0開始的解決辦法[bubuko.com]

預設情況下如下圖

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開始

相關推薦

chart.js外掛生成折線資料普遍Y資料0開始解決辦法[bubuko.com]

預設情況下如下圖 Y軸並不是從0開始,這樣折現圖的幅度會很大,不是正常的幅度,解決辦法如下, 示例程式碼: window.onload = function () { var ctx = document.getElementById(

chart.js外掛生成折線資料普遍Y資料0開始解決辦法

預設情況下如下圖 Y軸並不是從0開始,這樣折現圖的幅度會很大,不是正常的幅度,解決辦法如下, 示例程式碼: window.onload = function () { var ctx = document.getElementById("canvas").getConte

jQuery 圓形統計外掛circliful2--圓環每次0開始

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>circliful</title> <link rel

資料結構與演算法120—陣列(陣列為什麼0開始

更多內容訪問:www.lifesmile.cn 一、陣列為什麼從0開始?     提到陣列很多人都會覺得非常簡單,是的,使用起來非常簡單。但是我相信很多人都沒有理解到它的精髓。比如說陣列為啥要從0開始而不是1開始呢? 二、什麼是陣列?     陣列是一種線性表資料結構

win10 遠端桌面,使用者名稱密碼無誤,仍然提示憑證工作問題 的解決辦法

在被遠端的計算機進行設定      開始-->執行->gpedit.msc->計算機配置->Windows設定->安全設定->本地策略->安全選項->

echarts (js外掛) 點選柱狀顯示xy資料 加 百分號

tooltip: {          show: true, // 是否顯示提示框元件           trigger: 'axis', //座標軸觸發,用在柱狀圖,折線圖等會使用類目軸的圖表中使用           ormatter: function( datas

使用jfreechart統計資料生成折線(座標x,y值大小可以自己設定)

需求:一個目錄下包含多個txt檔案,每個txt檔案每行儲存一個數據,根據每個txt檔案的資料生成一個折線圖,y軸為每行的資料,x軸表示第幾行。 b.建立新的java工程時,依賴這2個jar包。 c.相關jfreechart介紹: org.jfree.chart.Char

VUE.JS 使用axios資料請求資料繫結 報錯 TypeError: Cannot set property 'xxxx' of undefined 的解決辦法

正常情況下在data裡面都有做了定義 在函式裡面進行賦值 這時候你執行時會發現,資料可以請求到,但是會報錯 TypeError: Cannot set property 'listgroup' of undefined  主要原因是: 在 then的內部不能使用Vue的例項

Java 學習筆記之jfreechart 生成折線,餅

分享一下我老師大神的人工智慧教程!零基礎,通俗易懂!http://blog.csdn.net/jiangjunshow 也歡迎大家轉載本篇文章。分享知識,造福人民,實現我們中華民族偉大復興!        

echarts Y資料型別不同怎麼讓折線顯示差距不大

如果希望在同一grid中展示不同資料型別的折線(1000或10%),那麼展現出來的折線肯定顯示差距很大,那麼怎麼讓這兩條折線顯示效果差不多,在之前的專案中碰到了這個問題 每條折線對應的是不同的資料組,即series的資料組,對每個資料組進行排序,求出最大值,然後將這些最大值放在一個數組裡,分別填充到yAix

第一個JS外掛——輪播

開發外掛,本人這裡採用的是模組化開發方式(Module),確保記憶體中只有一個物件引用,這樣可以節省記憶體,也可以使程式碼簡潔高效。 // 這裡採用()()這種自呼叫函式,形成閉包,內部函式是一個匿名函式,防止外掛使用者定義函式與外掛衝突。 (function(){ "use stri

python.matplotlib/datatime/CSV學習範例-讀取CSV格式檔案生成折線

import csv from datetime import datetime from matplotlib import pyplot as plt filename='D:\python program\weather.csv' #分析csv標頭檔案 wit

Echarts動態載入折線X Y資料圖表資料

   前幾天,收到商家的反饋,希望可以有一個直觀的圖表,展示一個時間段裡的銷售額,客數,排班人數,並把銷售高峰期以及時間段反應出來。經同事的介紹,選擇了百度的  echarts,縮寫來自Enterprise Charts,一個純JavaScript的圖表庫。上官網查,官方的

使用Eclipse的UML外掛生成

Created samedi 31 mai 2014UML就是可以把程式的結構用圖的形式表達出來的東西(好像叫類圖), 雖然寫程式的時候不大會用到這種東西來搞, 但是寫報告的時候如果能夠加上一張圖的話, 就可以少費些口舌來解釋程式碼了, 而且還有一種高大上的趕腳

js 動態生成背景 GeoPattern

以前有個想法,能不能用JS動態建立CANVAS繪製圖案當網頁背景,在網路發現有現成的別人已經實現的:GeoPattern 程式碼如下: <!DOCTYPE html> <html> <head> <title>js 生成隨機背景圖<

js自動生成

放入head裡面<script language="javascript"><!--var flag=false;function DrawImage(ImgD){var image=new Image();image.src=ImgD.src;if(ima

d3.js學習10----折線的製作

一切盡在註釋中……………… <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>ZheXian</title> <script

JFreeChart(使用一):生成折線

一、介紹 JFreeChart是JAVA平臺上的一個開放的圖表繪製類庫。它完全使用JAVA語言編寫,是為applications, applets, servlets 以及JSP等使用所設計。JFreeChart可生成餅圖(pie charts)、柱狀圖(bar chart

Chart.js外掛的canvas大小問題

Detecting when the canvas size changes can not be done directly from the CANVAS element. Chart.js uses its parent container to update the

Java 學習筆記之jfreechart 生成折線,餅, ...

package com.yyh.jfreechart; import java.awt.Color; import java.awt.Font; import java.io.File; import java.io.FileOutputStream; import ja