<tr id="ublig"><code id="ublig"><delect id="ublig"></delect></code></tr>
  • <noframes id="ublig"></noframes>
    1. <output id="ublig"></output>

    2. <mark id="ublig"><rp id="ublig"></rp></mark>

      <sup id="ublig"></sup>

      微信小程序各種圖表繪制

      發布日期:2021年07月28日 瀏覽次數:11133 小程序 圖表

      來源: https://www.cnblogs.com/mmykdbc/p/8927329.html


      還有就是可以使用一些小程序的插件,比如wx-charts.

      先來看一下網上對這個插件的評價:

      目前在github上有1804顆星,使用的比較廣泛。

      github地址:https://github.com/xiaolin3303/wx-charts.git;

      支持圖標類型

      • 餅圖 pie

      • 圓環圖 ring

      • 線圖 line

      • 柱狀圖 column

      • 區域圖 area

      • 雷達圖 radar

      使用方法

      直接引入編譯好的dist里面的js文件(二選一)

       

       然后在需要使用的頁面的js當中使用require引入即可:

      1
      let Charts = require('./../../utils/wxcharts.js');

        .wxml中定義

        canvas-id與js當中的new Charts選項當中的canvasId必須要一致才行;

      參數說明:

      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
      opts                         Object
      opts.canvasId                String required                    微信小程序canvas-id
      opts.width                   Number required                canvas寬度,單位為px
      opts.height                  Number required                canvas高度,單位為px
      opts.title                   Object           (only for ring chart)
      opts.title.name              String           標題內容
      opts.title.fontSize          Number            標題字體大?。蛇x,單位為px)
      opts.title.color             String           標題顏色(可選)
      opts.subtitle                Object         (only for ring chart)
      opts.subtitle.name           String           副標題內容
      opts.subtitle.fontSize       Number          副標題字體大?。蛇x,單位為px)
      opts.subtitle.color          String          副標題顏色(可選)
      opts.animation               Boolean default true         是否動畫展示
      opts.legend                  Boolen default true       是否顯示圖表下方各類別的標識
      opts.type                    String required 圖表類型,可選值為pie, line, column, area,radar,ring
      opts.categories              Array required       (餅圖、圓環圖不需要) 數據類別分類
      opts.dataLabel               Boolean default true     是否在圖表中顯示數據內容值
      opts.dataPointShape          Boolean default true   是否在圖表中顯示數據點圖形標識
      opts.xAxis                   Object       X軸配置
      opts.xAxis.disableGrid       Boolean default false      不繪制X軸網格(適用于折線圖,柱形圖,區域圖)
      opts.yAxis                   Object    Y軸配置
      opts.yAxis.format            Function           自定義Y軸文案顯示
      opts.yAxis.min               Number        Y軸起始值
      opts.yAxis.max               Number           Y軸終止值
      opts.yAxis.title             String       Y軸title
      1
      opts.yAxis.titleFontColor             String       Y軸title的文字的顏色
      1
      opts.yAxis.fontColor             String       Y軸文字的顏色
      1
      opts.yAxis.gridColor             String       Y軸格子的顏色
      1
      2
      opts.yAxis.disabled          Boolean default false        不繪制Y軸
      opts.series                  Array required        數據列表

        數據列表series的參數

      1
      2
      3
      4
      5
      dataItem                      Object
      dataItem.data                 Array required (餅圖、圓環圖為Number) 數據
      dataItem.color                String 例如#7cb5ec 不傳入則使用系統默認配色方案
      dataItem.name                 String 數據名稱
      dateItem.format               Function 自定義顯示數據內容

        高清顯示

      設置canvas的尺寸為2倍大小,然后縮小到50%,建議都進行這樣的設置,圖表本身繪制時是按照高清顯示配置的,不然整體效果會偏大(一般以iPhone6為標準進行設計)

      1
      2
      3
      4
      5
      6
      /* 例如設計圖尺寸為320 x 300 */
      .canvas {
          width: 640px;
          height: 600px;
          transform: scale(0.5)
      }

        例子:

        pie(餅圖)

      1
      2
      3
      4
      5
      6
      7
      8
      new Charts({
           canvasId: 'canvas1',
           type: 'pie',
           series: [{ name: '一班', data: 50 }, { name: '二班', data: 30 }, { name: '三班', data: 20 }, { name: '四班', data: 18 }, { name: '五班', data: 8 }],
           width: 640,
           height: 400,
           dataLabel: true,
         });

        

       

       線圖(circle)

      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
      new Charts({
      canvasId: 'canvas2',
      dataPointShape: "circle",
      type: 'line',
      extra: {
      lineStyle: 'curve' //線條的形狀(弧形)
      },
      categories: ['2012', '2013', '2014', '2015', '2016', '2017'],
      series: [{
      name: '成交量1',
      data: [0.15, null, 0.45, 0.37, 0.4, 0.8],//設置某一個值為null會出現斷層
      format: function (val) {
      return val.toFixed(2) + '萬';
      }
      }, {
      name: '成交量2',
      data: [0.30, 0.37, 0.65, 0.78, 0.69, 0.94],
      format: function (val) {
      return val.toFixed(2) + '萬';
      }
      }],
      yAxis: {
      title: '成交金額 (萬元)',
      format: function (val) {
      return val.toFixed(2);
      },
      fontColor: "red",
      titleFontColor: "red",
      min: 0,
      gridColor:
      "red"
      1
      2
      3
      4
      5
      },
      width: 840,
      height: 600,
      dataLabel: true
      });

        

        

       

       

      柱狀圖(column)

      1
      2
      3
      4
      5
      6
      7
      8
      new Charts({
           canvasId: 'canvas3',
           dataPointShape: false,
           type: 'column',
           categories: ['2016-08', '2016-09', '2016-10', '2016-11', '2016-12', '2017'],
           series: [{
             name: '成交量1',
             data: [15, 20, 45, 37, 4, 80],
           color:
      "rgba(0,0,0,0.3)"//支持rgba,但不支持漸變色
      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      13
      14
      15
      16
      17
      18
      19
      20
      21
      22
      23
      24
        }, {
          name: '成交量2',
          data: [70, 40, 65, 100, 34, 18]
        }, {
          name: '成交量3',
          data: [100, 50, 75, 200, 15, 13]
        }],
        yAxis: {
          format: function (val) {
            return val + '萬';
          }
        },
        xAxis: {
          disableGrid: true,
        },
        width: 640,
        height: 400,
        dataLabel: true,
        extra: {
          column: {
            width: 40 //柱的寬度
          }
        }
      });

        

       

      區域圖(area)

      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
      new Charts({
          canvasId: 'canvas4',
          type: 'area',
          categories: ['2016-08', '2016-09', '2016-10', '2016-11', '2016-12', '2017'],
          series: [{
            name: '成交量1',
            data: [70, 40, 65, 100, 34, 18],
            format: function (val) {
              return val.toFixed(2) + '萬';
            }
          }, {
            name: '成交量2',
            data: [15, 20, 45, 37, 4, 80],
            format: function (val) {
              return val.toFixed(2) + '萬';
            }
          }],
          yAxis: {
            format: function (val) {
              return val + '萬';
            }
          },
          width: 640,
          height: 400
        });

        

      環形圖(ring)

      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
      31
      32
      33
      34
      35
      36
      37
      38
      39
      40
      41
      42
      43
      44
      new Charts({
            animation: true,
            canvasId: 'canvas5',
            type: 'ring',
            extra: {
              ringWidth: 10,//圓環的寬度
              pie: {
                offsetAngle: -45//圓環的角度
              }
            },
            title: {
              name: '70%',
              color: '#7cb5ec',
              fontSize: 25
            },
            subtitle: {
              name: '收益率',
              color: '#666666',
              fontSize: 15
            },
            series: [{
              name: '成交量1',
              data: 15,
              stroke: false
            }, {
              name: '成交量2',
              data: 35,
              stroke: false
            }, {
              name: '成交量3',
              data: 78,
              stroke: false
            }, {
              name: '成交量4',
              data: 63,
              stroke: false
            }],
            disablePieStroke: true,
            width: 640,
            height: 200,
            dataLabel: true,
            legend: false,
            padding: 0
          });

        

      雷達圖(radar)

      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      13
      14
      15
      16
      17
      18
      19
      20
      new Charts({
           animation: true,
           canvasId: 'canvas6',
           type: 'radar',
           categories: ['1', '2', '3', '4', '5', '6'],
           series: [{
             name: '成交量1',
             data: [90, 110, 125, 95, 87, 122]
           }, {
             name: '成交量2',
             data: [190, 210, 105, 35, 27, 102]
           }],
           width: 640,
           height: 200,
           extra: {
             radar: {
               max: 200//雷達數值的最大值
             }
           }
         });

        

      但是,每一個插件都不是完美的,wx-charts雖然易上手的很容易的繪制圖形,但是無法滿足一些復雜的情況,比如highcharts里面的一些散點圖啊之類的,x軸無法法定義title,無法實現背景色的改變和手指上移數據的展示,也無法實現多個圖形進行結合,如折線圖和柱形圖進行同時的展示,只適合一些簡單的數據和單一圖像的展示。




      延伸閱讀

      微信小程序各種圖表繪制

      在做應用系統開發的時候,我們經常需要繪制各種統計圖表。如何做呢?這篇文章給你一個思路參考。

      初識 客戶端js DDOS攻防

      我們將從"攻"和"防"兩方面與您一同梳理JavaScript DDoS: 攻擊:攻擊者如何通過惡意地址、服務器劫持、中間人等手段來實施DDoS攻擊。 防御:網站如何使用HTTPS和SRI(Subresource Integrity)等手段來避免攻擊。

      百度編輯器上傳圖片時設置圖片展示的最大寬度

      百度編輯器上傳圖片能自動裁切圖片大小嗎? 這個我暫時不知道,不過作為應急辦法,可以暫時先設置圖片的最大寬度。如果哪位網友知道如何通過百度編輯器自動裁切壓縮圖片大小請告知,不勝感激。

      跨域資源共享 CORS 詳解

      CORS需要瀏覽器和服務器同時支持。目前,所有瀏覽器都支持該功能,IE瀏覽器不能低于IE10。 整個CORS通信過程,都是瀏覽器自動完成,不需要用戶參與。對于開發者來說,CORS通信與同源的AJAX通信沒有差別,代碼完全一樣。

      mysql 字符串截取

      數據庫開發過程中常用的字符串截取操作。

      dragsort:支持拖動排序js前端組建

      前端js拖拽排序組建, 看起來不錯. 收藏了.

      css選中子元素中不是第一個元素的3種方法

      前端開發中經常需要設置非第一個元素之外的樣式,這篇文章做一個總結. 需要的小伙伴歡迎查閱和分享.

      純 CSS 實現繪制各種三角形(各種角度)

      用CSS繪制三角形,這在前端開發過程中是比較常見的. 以前都是使用圖片代替, 當你看到這篇文章之后,也許以后遇到類似需求,就告別PS了.

      面向個體戶與個人的賬目小程序上線

      重點推薦給個體戶,個人家庭,個人合租用戶,臨時項目辦事等使用.用完即走,不轉內存, 可以多人合作記賬. AA記賬自動分賬. 單獨設置每個用戶的權限等非常實用的功能,大家合租的記賬隨時知道,統計功能也很強大,最重要是用起來很簡單,沒其他記賬產品那么復雜。

      廣西空中課堂在小程序發布視頻點播課

      覆蓋小學、初中、高中的12個年級的廣西中小學生“空中課堂”線上課程正式推出,而課堂小編輯選擇本公司小程序平臺發布,方便家中無法收視電視的同學方便使用手機端點播學習。
      亚洲综合憿情五月丁香五月网