データセットの値をchart.jsのインデックスのパーセンテージとしてどのようにスケールできますか？

Question

申し訳ありませんが、質問の文章が不十分です。 Here is my chart

私のような割合としてデータセット（S）の値のグラフの表示をスケーリングに探しています：チャート上

//input 
data:{ 
    datasets[{ 
     label: 'data1', 
     data: [15, 22, 18, 35, 16, 29, 40] 
    }, 
    { 
     label: 'data2', 
     data: [20, 21, 20, 19, 21, 22, 35] 
    }] 

DATA1のポイントのように表示される[42.9、51.2、47.4、64.8、チャート上の43.2、56.9、57.1]

DATA2の点は[57.1、48.8、52.6、35.2、56.8、43.1、42.9]

It should look like thisとして表示されます。可視線はすべて100％まで積み重ねる必要があります。データセットが隠れている場合、百分率を再計算してチャートを更新し、すべてが100％まで積み上げられるようにするにはどうすればよいですか？

私はmyLine.data.datasetsを使用して計算を行うことを考えましたが、隠しデータセットの値を計算から削除する方法がわかりません。表示しない方法がわかりません元のデータセットを上書きします。私はこれが間違ったアプローチだと確信しています。

ご協力いただければ幸いです。

Answer 1

私はそれを理解しました。私は、インデックス内のポイントの面積の割合を計算し、計算されたパーセント値でデータセットを更新する関数を書く必要がありました。

/*+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ 
* 
* DS_update calculates the percentage area of the input datasets 
* 
++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/ 
function DS_update(dataset_in, ds_vis){ 
    // make a deep copy (no references to the source) 
    var temp = jQuery.extend(true, [], dataset_in); 

    // gets the sum of all datasets at a given index 
    function getTotal(index){ 
     total = 0; 
     // step through the datasets 
     dataset_in.forEach(function(e, i){ 
      // inc total if the dataset is visible 
      if(ds_vis[i]){ 
       total += e[index]; 
      } 
      // do nothing if the dataset is hidden 

     }); 
     return total; 
    } 

    // update temp array with calculated percentage values 
    temp.forEach(function(el, ind){         

     var j = ind; 
     el.forEach(function(e, i){  
      // calculate percentage to the hundredths place 
      temp[j][i] = Math.round((e/getTotal(i))*10000)/100; 
     }); 
    }); 

    return temp; 
} 

私は、チャートの初期ロード前にそれらを実行するか、他のユーザーが非面積パーセント（生データ）としてデータセットを見ることが持っていた機能をテストしたら。これは次のようになります。

// Keep source array to use in the tool tips 
var Src_ary = Input_data; // multidimensional array of input data 
// holds the percent-area calculations as datapoints 
var Prod_ary = DS_update(Src_ary, Init_visible(Src_ary)); 

次は、凡例のonClickを更新していました。 highchart fiddle

これは私が終わったものです：これは私がやろうとしたものである

legend: { 
    position: 'bottom', 
    usePointStyle: true, 
    onClick: 

     function(e, legendItem){  
      var index = legendItem.datasetIndex; 
      var ci = this.chart; 
      var meta = ci.getDatasetMeta(index); 
      var vis_ary = [];   
      var updatedSet = []; 

      // See controller.isDatasetVisible comment 
      meta.hidden = meta.hidden === null? !ci.data.datasets[index].hidden : null; 

      // load the visible array 
      for(var i = 0; i < (ci.data.datasets || []).length; i++){ 
       switch (ci.getDatasetMeta(i).hidden){ 
        case null: 
         vis_ary.push(true); 
        break;  
        default: 
         vis_ary.push(false); 
        break; 
       } 
      } 

      // update datasets using vis_ary to tell us which sets are visible 
      updatedSet = DS_update(Prod_ary, vis_ary); 
      myLine.data.datasets.forEach(function (e,i){ 
       e.data = updatedSet[i]; 
      }); 

      // We did stuff ... rerender the chart 
      ci.update(); 

     } 
    } 

最終結果：私は、これは、計算にアイテムの可視性がトグルされるたびに更新する必要がありますwith：fiddle

これをまとめるには、chartjs.orgのドキュメントを読むのに数日かかりました。最終的には、私はchart.jsとborderlineの初心者がjavascriptを使っていないことを考えるとかなり良いと思っています。