WeChat アプレットチャートプラグイン (wx-charts) の紹介-ミニプログラム開発-php.cn

WeChat アプレットチャートプラグイン (wx-charts) の紹介

不言

リリース： 2018-06-23 16:41:44

オリジナル

5328 人が閲覧しました

この記事では主に WeChat アプレットチャートプラグイン (wx-charts) のサンプルコードを紹介します。興味のある方は参考にしてください。

WeChatアプレットチャートツール、WeChat小型アプリ用チャート

キャンバス描画に基づく、小さいサイズ

チャートタイプをサポート

円グラフ円
ドーナツチャートリング
折れ線グラフ
棒グラフ列
面グラフエリア
コード分析はこちら

opts オブジェクト

opts.canvasId 文字列必須 WeChat ミニプログラム Canvas-ID

opts。キャンバスの幅、単位は px

opts.height 数値必要なキャンバスの高さ、単位は px

opts.title オブジェクト (リングチャートのみ)

opts.title.name 文字列タイトル content

opts.title. fontSize 数値タイトルのフォントサイズ (オプション) 、単位はpx)

opts.title.color String タイトルの色(オプション)

opts.subtitle オブジェクト(リングチャートのみ)

opts.subtitle.name String 字幕コンテンツ

opts.subtitle.fontSize Number 字幕フォントsize (オプション、単位は px)

opts.subtitle.color String 字幕の色 (オプション)

opts.animation Boolean デフォルト true 表示をアニメーション化するかどうか

opts.legend Boolen デフォルト true 以下の各カテゴリの ID を表示するかどうかchart

opts.type 文字列必須チャートタイプ、オプションの値は円、折れ線、縦棒、面、リングです

opts.categories 配列必須（円グラフとドーナツグラフには不要）データカテゴリ分類

opts.dataLabel Boolean デフォルト true データコンテンツ値をチャートに表示するかどうか

opts.dataPointShape Boolean デフォルト true データポイントのグラフィック識別子をチャートに表示するかどうか

opts.xAxis オブジェクトの X 軸構成

opts.xAxis . disableGrid Boolean デフォルト false X 軸のグリッドを描画しません

opts.yAxis オブジェクト Y 軸の設定

opts.yAxis.format 機能 Y 軸のコピー表示をカスタマイズします

opts.yAxis.min 数値 Y 軸の開始value

opts.yAxis.max 数値 Y 軸の終端値

opts.yAxis.title 文字列 Y 軸のタイトル

opts.yAxis.disabled Boolean デフォルト false Y 軸を描画しません

opts.series 配列必須データlist

データリスト各構造体 Definition

dataItem Object

dataItem.data 配列必須 (円グラフ、ドーナツグラフの場合は数値) Data

dataItem.color String 例: #7cb5ec 渡されない場合、システムのデフォルト配色が使用されます

dataItem.name String データ名

dateItem.format Function 表示データ内容のカスタマイズ

例

円グラフ

var wxCharts = require(&#39;wxcharts.js&#39;);
new wxCharts({
 canvasId: &#39;pieCanvas&#39;,
 type: &#39;pie&#39;,
 series: [{
  name: &#39;cat1&#39;,
  data: 50,
 }, {
  name: &#39;cat2&#39;,
  data: 30,
 }, {
  name: &#39;cat3&#39;,
  data: 1,
 }, {
  name: &#39;cat4&#39;,
  data: 1,
 }, {
  name: &#39;cat5&#39;,
  data: 46,
 }],
 width: 360,
 height: 300,
 dataLabel: true
});

ログイン後にコピー

WeChat アプレットチャートプラグイン (wx-charts) の紹介

WeChat アプレットチャートプラグイン (wx-charts) の紹介リングチャート

new wxCharts({
 canvasId: &#39;ringCanvas&#39;,
 type: &#39;ring&#39;,
 series: [{
  name: &#39;成交量1&#39;,
  data: 15,
 }, {
  name: &#39;成交量2&#39;,
  data: 35,
 }, {
  name: &#39;成交量3&#39;,
  data: 78,
 }, {
  name: &#39;成交量4&#39;,
  data: 63,
 }],
 width: 320,
 height: 200,
 dataLabel: false
});

ログイン後にコピー

WeChat アプレットチャートプラグイン (wx-charts) の紹介

WeChat アプレットチャートプラグイン (wx-charts) の紹介折れ線チャート

new wxCharts({
 canvasId: &#39;lineCanvas&#39;,
 type: &#39;line&#39;,
 categories: [&#39;2012&#39;, &#39;2013&#39;, &#39;2014&#39;, &#39;2015&#39;, &#39;2016&#39;, &#39;2017&#39;],
 series: [{
  name: &#39;成交量1&#39;,
  data: [0.15, 0.2, 0.45, 0.37, 0.4, 0.8],
  format: function (val) {
   return val.toFixed(2) + &#39;万&#39;;
  }
 }, {
  name: &#39;成交量2&#39;,
  data: [0.30, 0.37, 0.65, 0.78, 0.69, 0.94],
  format: function (val) {
   return val.toFixed(2) + &#39;万&#39;;
  }
 }],
 yAxis: {
  title: &#39;成交金额 (万元)&#39;,
  format: function (val) {
   return val.toFixed(2);
  },
  min: 0
 },
 width: 320,
 height: 200
});

ログイン後にコピー

WeChat アプレットチャートプラグイン (wx-charts) の紹介

WeChat アプレットチャートプラグイン (wx-charts) の紹介コラムチャート

new wxCharts({
 canvasId: &#39;columnCanvas&#39;,
 type: &#39;column&#39;,
 categories: [&#39;2012&#39;, &#39;2013&#39;, &#39;2014&#39;, &#39;2015&#39;, &#39;2016&#39;, &#39;2017&#39;],
 series: [{
  name: &#39;成交量1&#39;,
  data: [15, 20, 45, 37, 4, 80]
 }, {
  name: &#39;成交量2&#39;,
  data: [70, 40, 65, 100, 34, 18]
 }],
 yAxis: {
  format: function (val) {
   return val + &#39;万&#39;;
  }
 },
 width: 320,
 height: 200
});

ログイン後にコピー

WeChat アプレットチャートプラグイン (wx-charts) の紹介

WeChat アプレットチャートプラグイン (wx-charts) の紹介 WeChat アプレットチャートプラグイン (wx-charts) の紹介

new wxCharts({
 canvasId: &#39;areaCanvas&#39;,
 type: &#39;area&#39;,
 categories: [&#39;2016-08&#39;, &#39;2016-09&#39;, &#39;2016-10&#39;, &#39;2016-11&#39;, &#39;2016-12&#39;, &#39;2017&#39;],
 series: [{
  name: &#39;成交量1&#39;,
  data: [70, 40, 65, 100, 34, 18],
  format: function (val) {
   return val.toFixed(2) + &#39;万&#39;;
  }
 }, {
  name: &#39;成交量2&#39;,
  data: [15, 20, 45, 37, 4, 80],
  format: function (val) {
   return val.toFixed(2) + &#39;万&#39;;
  }
 }],
 yAxis: {
  format: function (val) {
   return val + &#39;万&#39;;
  }
 },
 width: 320,
 height: 200
});

ログイン後にコピー

WeChat アプレットチャートプラグイン (wx-charts) の紹介