【開源】基于微信小程序 Canvas API 實現的柱狀圖和趨勢圖

OBKoro1 發布于2019-08-20 13:54 / 3412人閱讀

摘要：所以調用者可以根據自己業務的需要添加信息，但有些字段是必須的數字比如是日期調用者根據業務需要添加任意字段的數據結構吃喝調用者根據業務需要添加任意字段示意圖體驗掃描進小程序天天隨手記賬記一筆賬回到首頁點左下角圖標。

wechat-chart

基于微信小程序 Canvas API 實現的柱狀圖和趨勢圖

GitHub 地址

用法

let Line = require("../../utils/line.js");
let line = new Line();
line.draw({
    renderTo: "lineCanvas",
    series: data, //data 數據結構見下文
    pagePadding: 12, //頁面左右padding的像素值
    setCanvasSize: o=>this.setData({lineCtxHeight:o.height}),  //設置 canvas 的高度，至于寬度，當前是限制寬度只能占滿屏幕，暫時沒有提供接口
    onTouch: e=>this.setData({ oneDayData: e.serie }) //點擊事件，當點擊趨勢圖時觸發，e 是事件類（詳見微信文檔），e.serie 是當前點擊處橫坐標對應的對象，它是data的一個元素
})

// data的數據結構, data是一個數組，一個元素代表一個點，點擊時這個點的數據會通過事件對象的 serie 屬性傳給回調函數。
// 所以調用者可以根據自己業務的需要添加信息，但有些字段是必須的：
[ 
  {
    value: 23,    //數字
    txt: "02-08"  //比如是日期
    ... // 調用者根據業務需要添加任意字段
  }
  ... 
]

let Bar = require("../../utils/bar.js");
let bar = new Bar();
bar.draw({
    renderTo:"tagRateCanvas",
    series:data,
    setCanvasSize: o=>this.setData({ctxHeight:o.height}),
    onTouch:(e)=>{
      let serie = e.serie
      this.renderRecords(serie.items)
    }
})


//data的數據結構
[
  {
    tag:"吃喝",
    value: 98
    ... // 調用者根據業務需要添加任意字段
  }
  ...
]

DEMO & 示意圖

體驗DEMO
掃描進小程序 --> 天天隨手記賬 --> 記一筆賬-->回到首頁點左下角圖標。進入統計頁面即看到效果

此外，我還開源了些小程序的前后端源碼，你可以在那里看到我是怎么調用的 Github 地址

示意圖

關于我的信息可以來關注我的公眾號，我在那里記錄

GPU云服務器云服務器微信小程序技術實現微信小程序api接口柱狀圖在java實現微信小程序的功能

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/81302.html

echarts拆線圖和柱狀圖疊加，雙Y軸，動畫延時

摘要：需求制作疊加的拆線圖，柱狀圖，雙軸工具代碼交易日柱狀圖動畫延遲成交價昨收價成交額成交價元成交額萬元成交價昨收價成交額效果圖關鍵說明中可以疊加多組數據，要指定中的第二個軸中的表示的位置，表示在最大值處，默認在值一端表示數值序列是否倒置。需求制作疊加的拆線圖，柱狀圖，雙Y軸工具 echarts 代碼 var xAxisData = []; var data1 = []; var da...

LeexMuller 2019-08-23 10:52 評論0 收藏0
微信小程序基于wepy使用canvas簡單的畫波柱狀圖

摘要：參考了這里只是給自己簡單的記錄下代碼發現很多變量不知道咋稱呼它意會意會全局定義一個軸數據源是軸的刻度數量刻度線參考了 https://www.cnblogs.com/yxysu...這里只是給自己簡單的記錄下代碼發現很多變量不知道咋稱呼它 - - 意會意會全局定義一個 const cx = wepy.createCanvasContext(chart) drawChart...

starsfun 2019-08-22 15:50 評論0 收藏0
[開源] SpriteJS -- 一款簡單的跨終端 canvas 繪圖框架

摘要：是一款由奇舞團開源的跨終端繪圖框架，可以基于快速繪制結構化動畫和交互效果，并發布到任何擁有環境的平臺上比如瀏覽器小程序和。有如下特點基于繪制的文檔對象模型四種基本精靈類型支持基礎和高級的精靈屬性，精靈盒模型屬性與具有高度一致性。 SpriteJS 是一款由360奇舞團開源的跨終端 canvas 繪圖框架，可以基于 canvas 快速繪制結構化 UI、動畫和交互效果，并發布到任何擁有ca...

Achilles 2019-08-22 18:08 評論0 收藏0
[開源] SpriteJS -- 一款簡單的跨終端 canvas 繪圖框架

摘要：是一款由奇舞團開源的跨終端繪圖框架，可以基于快速繪制結構化動畫和交互效果，并發布到任何擁有環境的平臺上比如瀏覽器小程序和。有如下特點基于繪制的文檔對象模型四種基本精靈類型支持基礎和高級的精靈屬性，精靈盒模型屬性與具有高度一致性。 SpriteJS 是一款由360奇舞團開源的跨終端 canvas 繪圖框架，可以基于 canvas 快速繪制結構化 UI、動畫和交互效果，并發布到任何擁有ca...

hover_lew 2019-08-30 15:53 評論0 收藏0