2016-11-09 16 views
0

私は完全に機能するChart.JS Barchartを意図どおりにロードしていますが、すべてのエントリを見ることができる管理者がそれらを区別できるように、関連する各バーにユーザ名を追加したいと思います。個々のラベルをChart.JSバーに追加することはできますか?

function BarChart(data) { 
       var barChartData = { 
        labels: data.Month, 
        datasets: [ 
         { 
          label: 'Weight (kg)', 
          fillColor: "rgba(220,220,220,0.5)", 
          backgroundColor: "rgba(46, 44, 211, 0.7)", 
          highlightFill: "rgba(220,220,220,0.75)", 
          highlightStroke: "rgba(220,220,220,1)", 
          data: data.Weight 
         }, 
         { 
          label: 'Steps', 
          fillColor: "rgba(0,0,0,0.5)", 
          backgroundColor: "rgba(215, 44, 44, 0.7)", 
          highlightFill: "rgba(0,0,0,0.5)", 
          highlightStroke: "rgba(0,0,0,0.5)", 
          data: data.Steps 
         } 
        ] 

       } 
       var ctx = document.getElementById("barchart").getContext("2d"); 
       window.myBar =new Chart(ctx, { 
        type: 'bar', 
        data: barChartData, 
        options: { responsive: true } 
       }); 

私が成功したユーザ名を通過したと、彼らはdata.Userを使用して呼び出すことができ、私は階段や重量ラベルにこれを追加するときしかし、私は手順」で終わる:管理者、管理者、管理者"(私は3つのエントリーを持っているので、すべて管理者から)。

各バーに所属するユーザー名を持つようにすることはできますか?

+0

使用highchartsすることができます場合は、すべてを行うことができます。 – mybirthname

+0

私はオープンソースのソリューションを使いたいと思っています。この時点で別のオプションを選択する際の問題は、私はちょうどチャートがうまく動作するように管理したことです(ユーザー名部分を除いて)。 – bmo

+0

Chart.jsは十分に機能していますが、可能性は限られています。私は彼らが命名するこの機能を持っているかどうか、覚えていることはハイチャートと比較できないことを覚えていません。データが保護されていないので、APIがオンラインになることができる場合は、Googleのグラフもチェックすることができます。無料です。 – mybirthname

答えて

0

頼んだものではないかもしれませんが、ツールチップに追加することもできます。

options: { 
    tooltips:{ 
    callbacks: { 
     afterLabel: function(e){return "added By:" +data.User[e.datasetIndex][e.index]} 
    } 
    } 
} 

https://jsfiddle.net/r71no58a/7/

+0

私によく見える、私は今試してみましょう! – bmo

+0

だから私はそれはあなたが提供するロジックの一部を使用して作業を取得するために管理: オプション:{ 応答:真、 ツールチップ:{ コールバック:{ afterLabel:機能(E){リターン "所有者:" + data.User [e.index]} } } } ありがとうございました! – bmo

関連する問題