EveryChartチュートリアル1--円グラフ

EveryChartは、シンプルで強力なJSグラフィックスツールを使用しています.ここでは、使用方法について説明します.
Chartは様々なグラフのベースクラスであり、インスタンス化できません.グラフの共通属性は次のとおりです.

titleヘッダ(オブジェクト)

width幅

height高さ

vividアニメーション表示

showValue表示値(メータ図に目盛りを表示するかどうか)

zoom増幅方式は通常followとselectの2つの方式

がある.

zoomScale増幅倍数

zoomWidth follow拡大時の拡大鏡の幅

focusEventフォーカスイベント

paddingイントラパッチ

background背景色

backgroundStop背景色のグラデーションのオフカラー(falseの場合はグラデーションなし)

linkリンク

を有効にするかどうか

tipマウスプロンプト

legend図例

itemグラフの各項目は、比較が必要なため、通常は1つの配列(メータ図に設定値)であり、各図itemのデータ構造は異なるので、後で逐一紹介する.PS:これは重要です

主な方法は4つしかありません

add(item)比較オブジェクト

を追加

render(wrapper)レンダリング、パラメータwrapperはまたは

であってもよい

fail()グラフがサポートされていない場合に使用する方法(一般的には使用されない)

compose(otherChart)他のグラフ

を組み合わせる
1.餅型図Chart.Pie

    var pie = new Chart.Pie({
                'item' : [
                    {'text':'IE', 'value' : '53.68%'},
                    {'text':'Firefox', 'value' : '21.67%'},
                    {'text':'Chrome', 'value' : '13.11%'},
                    {'text':'Opera', 'value' : '1.73%'},
                    {'text':'Safari', 'value' : '7.48%'},
                    {'text':'Other', 'value' : '1.73%'}
                    ],
                'padding' : 55,
                'showValue' : true
            }).render('canvas-wrapper');

円グラフitemのデータ構造は

[{'text':text,'value':value,'color':color}]

text比較項目の名称

value比較項目は、Numberまたはパーセンテージ型の

であってもよい

color比較項目の色(特別に設定しない場合はデフォルトの色を使用)

 
一つの餅型図がこのように生成されました.簡単ではありませんか.
バルジ扇形をマウスでスライドさせたい場合はfocusEventをmousemoveに設定すればよい
詳細については、http://everyjs.co.cc/demo.html#pie1