1

次の例を見てください。

Plotly.newPlot(
   'myDiv',
   [{x: [1, 2], y: [2, 3]}, {x: [2, 1], y: [1, 2.5]}]);

var myPlot = document.getElementById('myDiv');

myPlot.on('plotly_click', function(data){
    var point = data.points[0];
    var newAnnotation = {
        x: point.xaxis.d2l(point.x),
        y: point.yaxis.d2l(point.y),
        arrowhead: 6,
        ax: 0,
        ay: -80,
        bgcolor: 'rgba(255, 255, 255, 0.9)',
        arrowcolor: point.fullData.marker.color,
        font: {size:12},
        bordercolor: point.fullData.marker.color,
        borderwidth: 3,
        borderpad: 4,
        text: 'An annotation!'},
    divid = document.getElementById('myDiv'),
    newIndex = (divid.layout.annotations || []).length;

     // delete instead if clicked twice
    if(newIndex) {
       var foundCopy = false;
       divid.layout.annotations.forEach(function(ann, sameIndex) {
         if(ann.text === newAnnotation.text ) {
           Plotly.relayout('myDiv', 'annotations[' + sameIndex + ']', 'remove');
           foundCopy = true;
         }
       });
       if(foundCopy) return;
     }

     Plotly.relayout('myDiv', 'annotations[' + newIndex + ']', newAnnotation);
  })
  .on('plotly_clickannotation', function(event, data) {
    Plotly.relayout('myDiv', 'annotations[' + data.index + ']', 'remove');
  });
<script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
<div id="myDiv" style="width:500px; height:600px;"></div>
<div id="debug"></div>

xその xaxis ポイントで他のすべてのポイントのホバー ラベルを表示するには、ホバーモードをデフォルトにしたいのですが、ポイントをクリックすると、その特定のポイントに注釈を作成したいのですが、見つからないようですそれを行う方法。

clickmode( に設定した場合も同様の状況selectで、クリックに実際に最も近いポイントではなく、使用可能な最初のポイントのみが選択されます。

4

1 に答える 1

1

クリック時に注釈を追加するための以下のリンクの参照コードを使用して、以下のソリューションを生成できました。

クリックで注釈を追加

下の行

hovertemplate: 'x: %{x}'

すべてのポイントの x 軸データが表示されるようにします。

これが唯一の大きな変更点でした。x 軸と y 軸の値は、上記の例の線を使用しています。このソリューションをチェックアウトして、役立つかどうかお知らせください。

Plotly.newPlot(
  'myDiv', [{
    x: [1, 2],
    y: [2, 3],
    hovertemplate: 'x: %{x}'
  }, {
    x: [2, 1],
    y: [1, 2.5],
    hovertemplate: 'x: %{x}'
  }], {
    hovermode: 'closest',
    title: 'Click on Points to add an Annotation on it'
  });

var myPlot = document.getElementById('myDiv');

myPlot.on('plotly_click', function(data) {
    var point = data.points[0];
    var pts = '';
    var annotations = [];
    for (var i = 0; i < data.points.length; i++) {
      var newAnnotation = {
        x: data.points[i].x,
        y: parseFloat(data.points[i].y.toPrecision(4)),
        arrowhead: 6,
        ax: 0,
        ay: -80,
        bgcolor: 'rgba(255, 255, 255, 0.9)',
        arrowcolor: point.fullData.marker.color,
        font: {
          size: 12
        },
        bordercolor: point.fullData.marker.color,
        borderwidth: 3,
        borderpad: 4,
        text: 'An annotation!'
      };
    newIndex = (myPlot.layout.annotations || []).length;

      // delete instead if clicked twice
      if (newIndex) {
        var foundCopy = false;
        myPlot.layout.annotations.forEach(function(ann, sameIndex) {
          if (ann.text === newAnnotation.text) {
            Plotly.relayout('myDiv', 'annotations[' + sameIndex + ']', 'remove');
            foundCopy = true;
          }
        });
        if (foundCopy) return;
      }

     Plotly.relayout('myDiv', 'annotations[' + newIndex + ']', newAnnotation);
    }
  })
  .on('plotly_clickannotation', function(event, data) {
    Plotly.relayout('myDiv', 'annotations[' + data.index + ']', 'remove');
  });
<script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
<div id="myDiv" style="width:500px; height:600px;"></div>
<div id="debug"></div>

于 2019-02-06T05:32:53.997 に答える