chartjsで常にツールチップを表示する2.4 not working

Question

私はchartjsのツールチップを常に表示しようとしています。このコードをhttps://github.com/chartjs/Chart.js/issues/1861から直接コピーしましたが、まだ動作していません。 "Chart.Tooltip.positioners [opts.position]は関数ではありません"というエラーメッセージが表示されます。

誰でも助けてください。これは、（誰かがそれは2.1.6で破っ述べた後、更新されたバージョンとのコメントがあります）

Chart.pluginService.register({ 
    beforeRender: function (chart) { 
     if (chart.config.options.showAllTooltips) { 
      // create an array of tooltips 
      // we can't use the chart tooltip because there is only one tooltip per chart 
      chart.pluginTooltips = []; 
      chart.config.data.datasets.forEach(function (dataset, i) { 
       chart.getDatasetMeta(i).data.forEach(function (sector, j) { 
        chart.pluginTooltips.push(new Chart.Tooltip({ 
         _chart: chart.chart, 
         _chartInstance: chart, 
         _data: chart.data, 
         _options: chart.options, 
         _active: [sector] 
        }, chart)); 
       }); 
      }); 

      // turn off normal tooltips 
      chart.options.tooltips.enabled = false; 
     } 
    }, 
    afterDraw: function (chart, easing) { 
     if (chart.config.options.showAllTooltips) { 
      // we don't want the permanent tooltips to animate, so don't do anything till the animation runs atleast once 
      if (!chart.allTooltipsOnce) { 
       if (easing !== 1) 
        return; 
       chart.allTooltipsOnce = true; 
      } 

      // turn on tooltips 
      chart.options.tooltips.enabled = true; 
      Chart.helpers.each(chart.pluginTooltips, function (tooltip) { 
       tooltip.initialize(); 
       tooltip.update(); 
       // we don't actually need this since we are not animating tooltips 
       tooltip.pivot(); 
       tooltip.transition(easing).draw(); 
      }); 
      chart.options.tooltips.enabled = false; 
     } 
    } 
}); 


     //var ctx = document.getElementById("chrtWhoPays").getContext("2d"); 
     //var piechart = new Chart(ctx, config); 

     var ctx = document.getElementById("chrtWhoPays"); 
    var myChart = new Chart(ctx, { 
     type: 'doughnut', 
     data: { 
      labels: ["Payer1", "Payer2", "Payer3", "Payer4", "Payer5", "Payer6"], 
      datasets: [{ 
       data: [51.9, 22.3, 15.7, 7.9, 0.6, 1.6], 
       backgroundColor: [ 
        '#333', 
        '#547b84', 
        '#2faea9', 
        '#a2d5ab', 
        '#433c3b', 
        '#e4efc1' 
       ] 
      }] 
     }, 
     options: { 
      responsive: true, 
      showAllTooltips: true 

     } 
    }); 

Answer 1

はあなたがプラグインサービスの最新バージョンを使用していないことになりそうだ...おそらく一つの小さなことです

使用すると、ほとんどの日付のバージョン、あなたは問題ないはずまで、ここにあなたのデータとその一例である

Chart.pluginService.register({ 
 
    beforeRender: function(chart) { 
 
    if (chart.config.options.showAllTooltips) { 
 
     // create an array of tooltips 
 
     // we can't use the chart tooltip because there is only one tooltip per chart 
 
     chart.pluginTooltips = []; 
 
     chart.config.data.datasets.forEach(function(dataset, i) { 
 
     chart.getDatasetMeta(i).data.forEach(function(sector, j) { 
 
      chart.pluginTooltips.push(new Chart.Tooltip({ 
 
      _chart: chart.chart, 
 
      _chartInstance: chart, 
 
      _data: chart.data, 
 
      _options: chart.options.tooltips, 
 
      _active: [sector] 
 
      }, chart)); 
 
     }); 
 
     }); 
 

 
     // turn off normal tooltips 
 
     chart.options.tooltips.enabled = false; 
 
    } 
 
    }, 
 
    afterDraw: function(chart, easing) { 
 
    if (chart.config.options.showAllTooltips) { 
 
     // we don't want the permanent tooltips to animate, so don't do anything till the animation runs atleast once 
 
     if (!chart.allTooltipsOnce) { 
 
     if (easing !== 1) 
 
      return; 
 
     chart.allTooltipsOnce = true; 
 
     } 
 

 
     // turn on tooltips 
 
     chart.options.tooltips.enabled = true; 
 
     Chart.helpers.each(chart.pluginTooltips, function(tooltip) { 
 
     tooltip.initialize(); 
 
     tooltip.update(); 
 
     // we don't actually need this since we are not animating tooltips 
 
     tooltip.pivot(); 
 
     tooltip.transition(easing).draw(); 
 
     }); 
 
     chart.options.tooltips.enabled = false; 
 
    } 
 
    } 
 
}); 
 

 
var ctx = document.getElementById("canvas").getContext("2d"); 
 
var myChart = new Chart(ctx, { 
 
    type: 'doughnut', 
 
    data: { 
 
    labels: ["Payer1", "Payer2", "Payer3", "Payer4", "Payer5", "Payer6"], 
 
    datasets: [{ 
 
     data: [51.9, 22.3, 15.7, 7.9, 0.6, 1.6], 
 
     backgroundColor: [ 
 
     '#333', 
 
     '#547b84', 
 
     '#2faea9', 
 
     '#a2d5ab', 
 
     '#433c3b', 
 
     '#e4efc1' 
 
     ] 
 
    }] 
 
    }, 
 
    options: { 
 
    responsive: true, 
 
    showAllTooltips: true 
 

 
    } 
 
}); 
 

 
var data = { 
 
    labels: [ 
 
    "Red", 
 
    "Green", 
 
    "Yellow" 
 
    ], 
 
    datasets: [{ 
 
    data: [300, 50, 100], 
 
    backgroundColor: [ 
 
     "#FF6384", 
 
     "#36A2EB", 
 
     "#FFCE56" 
 
    ], 
 
    hoverBackgroundColor: [ 
 
     "#FF6384", 
 
     "#36A2EB", 
 
     "#FFCE56" 
 
    ] 
 
    }] 
 
};

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.4.0/Chart.js"></script> 
 
<canvas id="canvas"></canvas>