2017-09-28 11 views
0

Data OverflowChart.js 2データセットがTOPの近くにある場合、データセットをバーにどのように配置しますか?

このグラフでは、Chart.js v2.1.4を使用して作業しています。オーバーフローする上位データは、それ自体を調整し、垂直バーの内側に移動する必要があります。したがって、特定のデータセットが最大値に近い場合、データセットは垂直バーの内側にある必要があります。誰か助けてください。

animation: { 
     duration: 500, 
     easing: "easeOutQuart", 
     onComplete: function() { 
     var ctx = this.chart.ctx; 
    ctx.font =Chart.helpers.fontString(Chart.defaults.global.defaultFontFamily, 'normal', Chart.defaults.global.defaultFontFamily); 
      ctx.textAlign = 'center'; 
      ctx.textBaseline = 'bottom'; 

    this.data.datasets.filter(dataset => 
    !dataset._meta[Object.keys(dataset._meta)[0]].hidden).forEach(function 
    (dataset) { 
    for (var i = 0; i < dataset.data.length; i++) { 
    var model = dataset._meta[Object.keys(dataset._meta)[0]].data[i]._model, scale_max = dataset._meta[Object.keys(dataset._meta[0]].data[i]._yScale.maxHeight; 
     ctx.fillStyle = '#000'; 
     var y_pos = model.y - 5; 
    // Make sure data value does not get overflown and hidden 
    // when the bar's value is too close to max value of scale 
    // Note: The y value is reverse, it counts from top down 
    if ((scale_max - model.y)/scale_max >= 0.80) 
     y_pos = model.y + 20; 
     console.log(y_pos); 
     verticalLabel(ctx, model, addCommas(dataset.data[i]), 50, 20, 4, y_pos); 

     } 
     });    
    } 
    } 

これはverticalLabel機能である:

function verticalLabel(ctx, data, dataToSplit, topOffset, spaceBetween, commaGap, why_pos) { 
     var i = 0, prev = 0; 
     console.log(data.y - spaceBetween * i - topOffset/why_pos); 
     for (x of dataToSplit.toString().split("").reverse()) { 
     if (x.indexOf(",") > -1) { 
     ctx.fillText(x, data.x + commaGap, prev - topOffset/why_pos); 
     } else { 
     ctx.fillText(x, data.x, data.y - spaceBetween * i - topOffset/why_pos); 
     i++; 
     } 
    var prev = data.y - spaceBetween * i; 
    } 
    } 

答えて

0

私は答えを見つけることが、私は他にverticalLabel機能の下の{}ブロックを編集した:

function verticalLabel(ctx, data, dataToSplit, topOffset, spaceBetween, commaGap, why_pos) { 
    var i = 0, prev = 0; 

    for (x of dataToSplit.toString().split("").reverse()) { 
     if (x.indexOf(",") > -1) { 
     ctx.fillText(x, data.x + commaGap, prev - topOffset/why_pos); 
     } else { 
     ctx.fillText(x, data.x, why_pos - spaceBetween * i - topOffset/why_pos); 
     i++; 
      } 
     var prev = data.y - spaceBetween * i; 
     } 
    } 

アニメーションの下で私のコード:{ }

if ((scale_max - model.y)/scale_max >= 0.60) 
    y_pos = model.y + 90; 
    verticalLabel(ctx, model, addCommas(dataset.data[i]), 50, 20, 4, y_pos); 

almost there graph

何とか動作していますが、まだ完全ではありません。棒グラフの中に挿入するとCOMMASが失われます。私はまだ助けが必要です。

+0

私はそれを得た。ははは。 verticalLabelの下で編集済み ** var prev = why_pos - spaceBetween * i; –

関連する問題