資訊專欄INFORMATION COLUMN
摘要：所以調(diào)用者可以根據(jù)自己業(yè)務(wù)的需要添加信息，但有些字段是必須的數(shù)字比如是日期調(diào)用者根據(jù)業(yè)務(wù)需要添加任意字段的數(shù)據(jù)結(jié)構(gòu)吃喝調(diào)用者根據(jù)業(yè)務(wù)需要添加任意字段示意圖體驗掃描進小程序天天隨手記賬記一筆賬回到首頁點左下角圖標(biāo)。
wechat-chart
基于微信小程序 Canvas API 實現(xiàn)的柱狀圖和趨勢圖
GitHub 地址
用法let Line = require("../../utils/line.js");
let line = new Line();
line.draw({
renderTo: "lineCanvas",
series: data, //data 數(shù)據(jù)結(jié)構(gòu)見下文
pagePadding: 12, //頁面左右padding的像素值
setCanvasSize: o=>this.setData({lineCtxHeight:o.height}), //設(shè)置 canvas 的高度，至于寬度，當(dāng)前是限制寬度只能占滿屏幕，暫時沒有提供接口
onTouch: e=>this.setData({ oneDayData: e.serie }) //點擊事件，當(dāng)點擊趨勢圖時觸發(fā)，e 是事件類（詳見微信文檔），e.serie 是當(dāng)前點擊處橫坐標(biāo)對應(yīng)的對象，它是data的一個元素
})
// data的數(shù)據(jù)結(jié)構(gòu), data是一個數(shù)組，一個元素代表一個點，點擊時這個點的數(shù)據(jù)會通過事件對象的 serie 屬性傳給回調(diào)函數(shù)。
// 所以調(diào)用者可以根據(jù)自己業(yè)務(wù)的需要添加信息，但有些字段是必須的：
[
{
value: 23, //數(shù)字
txt: "02-08" //比如是日期
... // 調(diào)用者根據(jù)業(yè)務(wù)需要添加任意字段
}
...
]
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的數(shù)據(jù)結(jié)構(gòu)
[
{
tag:"吃喝",
value: 98
... // 調(diào)用者根據(jù)業(yè)務(wù)需要添加任意字段
}
...
]
DEMO & 示意圖
體驗DEMO
掃描進小程序 --> 天天隨手記賬 --> 記一筆賬-->回到首頁點左下角圖標(biāo)。進入統(tǒng)計頁面即看到效果
此外，我還開源了些小程序的前后端源碼，你可以在那里看到我是怎么調(diào)用的 Github 地址
示意圖
關(guān)于我的信息可以來關(guān)注我的公眾號，我在那里記錄
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://m.hztianpu.com/yun/81302.html
摘要：需求制作疊加的拆線圖，柱狀圖，雙軸工具代碼交易日柱狀圖動畫延遲成交價昨收價成交額成交價元成交額萬元成交價昨收價成交額效果圖關(guān)鍵說明中可以疊加多組數(shù)據(jù)，要指定中的第二個軸中的表示的位置，表示在最大值處，默認(rèn)在值一端表示數(shù)值序列是否倒置。 需求 制作疊加的拆線圖，柱狀圖，雙Y軸 工具 echarts 代碼 var xAxisData = []; var data1 = []; var da...
摘要：參考了這里只是給自己簡單的記錄下代碼發(fā)現(xiàn)很多變量不知道咋稱呼它意會意會全局定義一個軸數(shù)據(jù)源是軸的刻度數(shù)量刻度線 參考了 https://www.cnblogs.com/yxysu...這里只是給自己簡單的記錄下代碼發(fā)現(xiàn)很多變量不知道咋稱呼它 - - 意會意會 全局定義一個 const cx = wepy.createCanvasContext(chart) drawChart...
摘要：是一款由奇舞團開源的跨終端繪圖框架，可以基于快速繪制結(jié)構(gòu)化動畫和交互效果，并發(fā)布到任何擁有環(huán)境的平臺上比如瀏覽器小程序和。有如下特點基于繪制的文檔對象模型四種基本精靈類型支持基礎(chǔ)和高級的精靈屬性，精靈盒模型屬性與具有高度一致性。 SpriteJS 是一款由360奇舞團開源的跨終端 canvas 繪圖框架，可以基于 canvas 快速繪制結(jié)構(gòu)化 UI、動畫和交互效果，并發(fā)布到任何擁有ca...
摘要：是一款由奇舞團開源的跨終端繪圖框架，可以基于快速繪制結(jié)構(gòu)化動畫和交互效果，并發(fā)布到任何擁有環(huán)境的平臺上比如瀏覽器小程序和。有如下特點基于繪制的文檔對象模型四種基本精靈類型支持基礎(chǔ)和高級的精靈屬性，精靈盒模型屬性與具有高度一致性。 SpriteJS 是一款由360奇舞團開源的跨終端 canvas 繪圖框架，可以基于 canvas 快速繪制結(jié)構(gòu)化 UI、動畫和交互效果，并發(fā)布到任何擁有ca...
閱讀 2702·2021-11-19 09:56
閱讀 963·2021-09-24 10:25
閱讀 1766·2021-09-09 09:34
閱讀 2288·2021-09-09 09:33
閱讀 1120·2019-08-30 15:54
閱讀 637·2019-08-29 18:33
閱讀 1335·2019-08-29 17:19
閱讀 569·2019-08-29 14:19
