<meter id="7ntxv"></meter>

<b id="7ntxv"><listing id="7ntxv"><ol id="7ntxv"></ol></listing></b>
<nobr id="7ntxv"></nobr><mark id="7ntxv"></mark>

    <p id="7ntxv"><menuitem id="7ntxv"><font id="7ntxv"></font></menuitem></p>
    <sub id="7ntxv"><menuitem id="7ntxv"><meter id="7ntxv"></meter></menuitem></sub>

    <mark id="7ntxv"></mark>
    <meter id="7ntxv"><var id="7ntxv"></var></meter>

    知識 分享 互助 懶人建站

      懶人建站專注于網頁素材下載,提供網站模板、網頁設計、ps素材、圖片素材等,服務于【個人站長】【網頁設計師】和【web開發從業者】的代碼素材與設計素材網站。

      懶人建站提供網頁素材下載、網站模板
      知識 分享 互助!

      微信小程序圖表插件(wx-charts)

      作者:佳明媽 來源:github 2016-12-01 人氣:
      微信小程序圖表插件(wx-charts)基于canvas繪制,體積小巧支持圖表類型餅圖、線圖、柱狀圖 、區域圖等圖表圖形繪制,目前wx-charts是微信小程序圖表插件中比較強大好使的一個。

      微信小程序圖表插件(wx-charts)基于canvas繪制,體積小巧支持圖表類型餅圖、線圖、柱狀圖 、區域圖等圖表圖形繪制,目前wx-charts是微信小程序圖表插件中比較強大好使的一個。

      wx-charts基于canvas繪制的微信小程序圖表插件

      支持圖表類型

      • 餅圖 pie
      • 線圖 line
      • 柱狀圖 column
      • 區域圖 area

      高清顯示

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

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

      wx-charts參數說明

      opts Object

      opts.canvasId String required 微信小程序canvas-id

      opts.width Number required canvas寬度,單位為px

      opts.height Number required canvas高度,單位為px

      opts.type String required 圖表類型,可選值為pie, line, column, area

      opts.categories Array required (餅圖不需要) 數據類別分類

      opts.dataLabel Boolean default true 是否在圖表中顯示數據內容值

      opts.yAxis Object Y軸配置

      opts.yAxis.format Function 自定義Y軸文案顯示

      opts.yAxis.min Number Y軸起始值

      opts.yAxis.title String Y軸title

      opts.series Array required 數據列表

      數據列表每項結構定義

      dataItem Object

      dataItem.data Array required (餅圖為Number) 數據

      dataItem.color String 例如#7cb5ec 不傳入則使用系統默認配色方案

      dataItem.name String 數據名稱

      dateItem.format Function 自定義顯示數據內容

      wx-charts圖表插件示例

      餅圖pie chart

      var Charts = require('charts.js');
      new Charts({
          canvasId: 'pieCanvas',
          type: 'pie',
          series: [{
              name: '成交量1',
              data: 15,
          }, {
              name: '成交量2',
              data: 35,
          }, {
              name: '成交量3',
              data: 78,
          }, {
              name: '成交量4',
              data: 63,
          }],
          width: 640,
          height: 400,
          dataLabel: false
      });

      pieChart

      線圖line chart

      new Charts({
          canvasId: 'lineCanvas',
          type: 'line',
          categories: ['2012', '2013', '2014', '2015', '2016', '2017'],
          series: [{
              name: '成交量1',
              data: [0.15, 0.2, 0.45, 0.37, 0.4, 0.8],
              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);
              },
              min: 0
          },
          width: 640,
          height: 400
      });

      lineChart

      柱狀圖columnChart

      new Charts({
          canvasId: 'columnCanvas',
          type: 'column',
          categories: ['2016-08', '2016-09', '2016-10', '2016-11', '2016-12', '2017'],
          series: [{
              name: '成交量1',
              data: [15, 20, 45, 37, 4, 80]
          }, {
              name: '成交量2',
              data: [70, 40, 65, 100, 34, 18]
          }, {
              name: '成交量3',
              data: [70, 40, 65, 100, 34, 18]
          }, {
              name: '成交量4',
              data: [70, 40, 65, 100, 34, 18]
          }],
          yAxis: {
              format: function (val) {
                  return val + '萬';
              }
          },
          width: 640,
          height: 400,
          dataLabel: false
      });

      columnChart

      區域圖areaChart

      new Charts({
          canvasId: 'areaCanvas',
          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
      });

      areaChart

      項目地址及下載:

      https://github.com/xiaolin3303/wx-charts

      ↓ 查看全文

      微信小程序圖表插件(wx-charts)由懶人建站收集整理,您可以自由傳播,請主動帶上本文鏈接

      懶人建站就是免費分享,覺得有用就多來支持一下,沒有能幫到您,懶人也只能表示遺憾,希望有一天能幫到您。

      微信小程序圖表插件(wx-charts)-最新評論

      亚洲免费的黄色网站_黄色网站在线放久操射视频_A片www.黄色网站成年人_天天干 天天操天天干

      <meter id="7ntxv"></meter>

      <b id="7ntxv"><listing id="7ntxv"><ol id="7ntxv"></ol></listing></b>
      <nobr id="7ntxv"></nobr><mark id="7ntxv"></mark>

        <p id="7ntxv"><menuitem id="7ntxv"><font id="7ntxv"></font></menuitem></p>
        <sub id="7ntxv"><menuitem id="7ntxv"><meter id="7ntxv"></meter></menuitem></sub>

        <mark id="7ntxv"></mark>
        <meter id="7ntxv"><var id="7ntxv"></var></meter>