チャーティストプラグインのどれも動作していません

Question

私は実際のチャーティストの折れ線グラフを持っており、ドキュメントで提案されているようにプラグインを設定しました。私はページを読み込むときにエラーが発生しません。そのことだけでは、プラグインによるとチャートに何も反映されません。 2つのプラグインを追加しました。エラーは表示されず、折れ線グラフは完全にうまく表示されます。

しかし、私はこれらのプラグインの効果を見ません - ツールチッププラグインとポイントラベルプラグイン。

はい、それらはHTMLに読み込まれ、そのCSSファイルも含まれています。それ以外の場合、プラグインが存在しないというエラーが表示されます。

var options = { 
    low: 0, 
    high: 100, 
    showGridBackground: false, 
    showArea: true, 
    axisX: { 
     showGrid: false 
    }, 
    axisY: { 
    }, 
    plugins: [ 
     Chartist.plugins.ctPointLabels({ 
      textAnchor: 'middle', 
      labelInterpolationFnc: function(value) {console.log("i was called"); return '$' + value} 
     }), 
     Chartist.plugins.tooltip({ 
     }) 
    ] 
}; 

var m = new Chartist.Line('#myChart', data, options); 

Answer 1

コードを使用した簡単な使用例です。注意すべき点の1つは、ツールチップにCSSを正しく表示する必要があることです。

https://jsfiddle.net/rxdb576n/1/

var data = { 
 
    labels: ["Mon", "Tue", "Wed"], 
 
    series: [ 
 
    [10, 20, 75] 
 
    ], 
 
} 
 

 
var options = { 
 
    low: 0, 
 
    high: 100, 
 
    showGridBackground: false, 
 
    showArea: true, 
 
    axisX: { 
 
    showGrid: false 
 
    }, 
 
    axisY: {}, 
 
    plugins: [ 
 
    Chartist.plugins.ctPointLabels({ 
 
     textAnchor: 'middle', 
 
     labelInterpolationFnc: function(value) { 
 
     console.log("i was called"); 
 
     return '$' + value 
 
     } 
 
    }), 
 
    Chartist.plugins.tooltip({ 
 

 
    }) 
 
    ] 
 
}; 
 

 
var m = new Chartist.Line('#myChart', data, options);

.chartist-tooltip { 
 
    opacity: 0; 
 
    position: absolute; 
 
    margin: 20px 0 0 10px; 
 
    background: rgba(0, 0, 0, 0.8); 
 
    color: #FFF; 
 
    padding: 5px 10px; 
 
    border-radius: 4px; 
 
} 
 

 
.chartist-tooltip.tooltip-show { 
 
    opacity: 1; 
 
}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/chartist/0.11.0/chartist.min.css"> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/chartist/0.11.0/chartist.min.js"></script> 
 
<script src="https://unpkg.com/chartist-plugin-tooltips@0.0.17"></script> 
 
<script src="https://unpkg.com/chartist-plugin-pointlabels@0.0.6"></script> 
 
<div id="myChart"></div>