点線および平均分割点線効果を描画するためのICHART.JS実装コード
var data = new Array();データ[0] = {ラベル:["Unit 1"、 "Unit 2"、 "unit 3"、 "unit 4"、 "ung 5"]、データセット:[{name: 'excrectence rate'、color: '#1dbcfe'、line_width:4、value:[80,75,92,62,0]}}}} 「ユニット4」、「ユニット5」]、データセット:[{name: 'Excellence Rate'、color: '#1DBCFE'、line_width:4、value:[50,11,62,77,90]}]}データ[2] = {ラベル:["ユニット1"、 "unit 2"、 "unit 4"、 "unt 4"色: '#1DBCFE'、line_width:4、value:[80,51,32,44,80]}]} var _bodywidth = $( 'body')。width() - 16; $( '。アイテム')。各(function(i){var _id = $(this).find( '。canvas-wrap')。 _BodyWidth*1.2、background_color: '#fafafa'、animation:true、// Open Transition Animation animation_duration:600、//完了したアニメーションSub_option:{Smooth、Hollow:False、Hollow_inside:False、Point_size:16、リスナー:{r、t)ラベル:{fontsize:24、color: '#333'}、}、coordinate:{width:_bodywidth*1.6、valid_width:_bodywidth*1.4、height:_bodywidth*1.6*.5、striped_factor:0.18、axis:{coler: '#aa'、width:width: ^位置: 'left'、start_scale:0、end_scale:100、scale_space:20、scale_size:2、scale_enable:false:{color: '#999'、fontsize:24}、sacle_color: '#999'}、{position: 'bottom'、{color: '#9999'、fore '、fore'、f.ラベル:data [i] .labels}]}); $ .each(data [i] .datasets [0] .value、function(i、val){_total+= val;}); coo.getscale( 'left')、h = coo.height、h =(avg -s.start) * h / s.distance.y+h -h; chart.target.textalign( 'start').textfont( '500 20px verdana')。上記のコードは、複数のラインチャートを描くためのJSの例であり、各ラインチャート内に平均点線を描画する方法です。
iChart.jsはJSを描く非常に良いアイコンです。欠点は、モバイル側では、最初にサイズの2倍を設定し、次にCSSとJSで通常の範囲に手動で絞り、画面上の高解像度を保持する必要があることです。
公式ウェブサイトに平均線を描く例がありますが、点線はありません。一般に、混乱しないようにするために、点線を使用して平均線が描画されます。ここでは、回避策であるN末線の直線を描くようにループしました。より良い方法がある場合は、メッセージを残してください。ありがとう。
ichart.jsで点線と等しく分割された点線を描くための上記のコードは、私があなたと共有するすべてのコンテンツです。参照を提供できることを願っています。wulin.comをもっとサポートできることを願っています。