chartjsバブルチャートの個々のバブルにはラベルが付いていますか？

Question

私はchartjを使ってバブルチャートを作成しています。それぞれのバブルを記述するツールチップを作成することはできますが、チャートのユーザーはツールチップを表示するためにマウスの上にマウスカーソルを置くことができないことがあります。 BubbleDataオブジェクト形式にはラベル要素が含まれていません（私はとにかくそれを置いています - 運はありません）。私はチャートデータオブジェクトの "labels"要素を試しました。知っている！）、そしてバブルにラベルを貼るために私が考えることができるすべて。

すべてのツールチップを常に表示できるツールチップ設定がありますか？これは私にとってもうまくいくでしょう。

ありがとうございます。

グレン

Answer 1

私は同じことを探して、それを行う方法を考え出しました。

1. あなたが表示したいタイトル： "dataTitle3"を追加します。

2. データラベリングプラグインを使用します。

   http://www.chartjs.org/samples/latest/advanced/data-labelling.html

3. 簡単なコードの操作は、あなたが、私はサンプルを作ったが、私はあなたが を見つける方法を、あなたが で遊ぶ場合は、必要なデータを表現することができると思い 「dataset.title」 を使って何をしたい実現しますhttps://jsfiddle.net/dovvas/s4zwzp3w/

HTML： <canvas id="bubble-chart" width="800" height="800"></canvas>

JAVASCRIPT：

new Chart(document.getElementById("bubble-chart"), { 
    type: 'bubble', 
    data: { 
    labels: "Africa", 
    datasets: [{ 
     label: ["China"], 
     backgroundColor: "rgba(255,221,50,0.2)", 
     borderColor: "rgba(255,221,50,1)", 
     title: "dataTitle1",//adding the title you want to show 
     data: [{ 
     x: 21269017, 
     y: 5.245, 
     r: 15 
     }] 
    }, { 
     label: ["Denmark"], 
     backgroundColor: "rgba(60,186,159,0.2)", 
     borderColor: "rgba(60,186,159,1)", 
     title: "dataTitle2", 
     data: [{ 
     x: 258702, 
     y: 7.526, 
     r: 10 
     }] 
    }, { 
     label: ["Germany"], 
     backgroundColor: "rgba(0,0,0,0.2)", 
     borderColor: "#000", 
     title: "dataTitle3",//adding the title you want to show 
     data: [{ 
     x: 3979083, 
     y: 6.994, 
     r: 15 
     }] 
    }, { 
     label: ["Japan"], 
     backgroundColor: "rgba(193,46,12,0.2)", 
     borderColor: "rgba(193,46,12,1)", 
     title: "dataTitle4",//adding the title you want to show 
     data: [{ 
     x: 4931877, 
     y: 5.921, 
     r: 15 
     }] 
    }] 
    }, 
    options: { 
    title: { 
     display: true, 
     text: 'Predicted world population (millions) in 2050' 
    }, 
    scales: { 
     yAxes: [{ 
     scaleLabel: { 
      display: true, 
      labelString: "Happiness" 
     } 
     }], 
     xAxes: [{ 
     scaleLabel: { 
      display: true, 
      labelString: "GDP (PPP)" 
     } 
     }] 
    } 
    } 
}); 

Chart.plugins.register({ 
    afterDatasetsDraw: function(chart, easing) { 
    var ctx = chart.ctx; 

    chart.data.datasets.forEach(function(dataset, i) { 
     var meta = chart.getDatasetMeta(i); 
     if (meta.type == "bubble") { //exclude scatter 
     meta.data.forEach(function(element, index) { 
      // Draw the text in black, with the specified font 
      ctx.fillStyle = 'rgb(0, 0, 0)'; 
      var fontSize = 13; 
      var fontStyle = 'normal'; 
      var fontFamily = 'Helvetica Neue'; 
      ctx.font = Chart.helpers.fontString(fontSize, fontStyle, fontFamily); 

      // Just naively convert to string for now 
      var dataString = dataset.data[index].toString(); 
      // Make sure alignment settings are correct 
      ctx.textAlign = 'center'; 
      ctx.textBaseline = 'middle'; 

      var padding = 15; 
      var position = element.tooltipPosition(); 
      ctx.fillText(dataset.title, position.x, position.y - (fontSize/2) - padding); 
     }); 
     } //if 
    }); 
    } 
});