wx charts

wxチャート

WeChat 小規模アプリのグラフ、WeChat 小規模アプリのグラフ

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

私たちは引き続き最適化と更新を行っておりますので、ご期待ください ~ ご質問がある場合は、問題を提起する前にこの通知をお読みください。

ByteDance は、北京、上海、深セン、杭州、成都、武漢、広州、南京で多数のフロントエンド開発エンジニア (ジュニア、シニア、シニア、リーダー) を募集しています。興味のある方は、ここをクリックして応募を送信してください。 。

サポートされているグラフの種類

• 円グラフのpie
• ドーナツチャートring
• 折れ線グラフのline
• 棒グラフのcolumn
• エリアマップarea
• レーダーチャートradar

コード分​​析はこちら

更新記録

• アニメーションパフォーマンスの最適化
• @jxintang のおかげでチャートのスクロールがサポートされました
• 曲線描画の最適化
• レーダーチャートを追加 2017-03-17
• 新しいツールチップ 2017-03-07
• 新しい曲線の描画 2017-03-06
• データを更新し、進行中のアニメーションを終了し、イベント コールバックをレンダリングするためのメソッドを追加しました 2017-02-17
• ドーナツチャートのタイトル、サブタイトルを追加 2017-01-10
• X 軸のコピーライティング衝突回避 2016-12-30
• 円グラフのデータラベルを追加 2016-12-19
• アニメーションを追加 2016-12-05
• rollupを使用してビルドする 2016-12-02
• 凡例を追加 2016-11-29

使用方法

1. コンパイル済みファイルdist/wxcharts.jsまたはdist/wxcharts-min.jsを直接参照します。

2. 自分でコンパイルする

 git clone https://github.com/xiaolin3303/wx-charts.git
npm install rollup -g
npm install
rollup -c 或者 rollup --config rollup.config.prod.js

実際のプロジェクトで wx-charts を使用する方法、または wx-charts-demo にアクセスして WeChat 開発ツールで直接実行する例を確認する方法

パラメータの説明

パラメータの説明 - wxCharts 使用法ドキュメント

メソッドとイベント

メソッドとイベント - wxCharts 使用説明書

例

詳細については、「例 - wxCharts の使用手順」を参照してください。

テスト

1. iPhone 6s、iOS 9.3.5
2. シャオミ 4、ANDORID 6.0.1

互換性の問題については「問題」で送信してください

いくつかの質問のまとめ

• wx-charts の適応型画面幅の問題
• プロジェクト内で wxCharts を具体的に使用する方法