バー上にマウスを置いたときにラベルを表示する方法

Question

chartist.jsで棒グラフを作成しました。

ここで、バーにリスニングイベントを追加します。

バーの上にマウスを置くとラベルが表示されるようにするにはどうすればよいですか？

オプション1

---

あなたが使用できるツールチッププラグインがあります -

Answer 1

あなたは、2つのオプションがあります。あなたはここでそれを見つけることができます - https://github.com/Globegitter/chartist-plugin-tooltip

を使用すると、CSSやJSファイルを追加したら、あなたはこのようにプラグインを呼び出すことができるはず -

var chart = new Chartist.Line('.ct-chart', { 
    labels: [1, 2, 3], 
    series: [ 
    [ 
     {meta: 'description', value: 1 }, 
     {meta: 'description', value: 5}, 
     {meta: 'description', value: 3} 
    ], 
    [ 
     {meta: 'other description', value: 2}, 
     {meta: 'other description', value: 4}, 
     {meta: 'other description', value: 2} 
    ] 
    ] 
}, { 
    low: 0, 
    high: 8, 
    fullWidth: true, 
    plugins: [ 
    Chartist.plugins.tooltip() 
    ] 
}); 

- Chartist.plugins.tooltip()

ここで彼らのPluginsページの例であります

これはより簡単でより良いオプションになります。

var data = { 
 
    labels: ['W1', 'W2', 'W3', 'W4', 'W5', 'W6', 'W7', 'W8', 'W9', 'W10'], 
 
    series: [ 
 
    [1, 2, 4, 8, 6, -2, -1, -4, -6, -2] 
 
    ] 
 
}; 
 

 
var options = { 
 
    high: 10, 
 
    low: -10, 
 
    axisX: { 
 
    labelInterpolationFnc: function(value, index) { 
 
     return index % 2 === 0 ? value : null; 
 
    } 
 
    } 
 
}; 
 

 
var chart = new Chartist.Bar('.ct-chart', data, options); 
 

 
var addedEvents = false; 
 
chart.on('draw', function() { 
 
    if (!addedEvents) { 
 
    $('.ct-bar').on('mouseover', function() { 
 
     $('#tooltip').html('<b>Selected Value: </b>' + $(this).attr('ct:value')); 
 
    }); 
 

 
    $('.ct-bar').on('mouseout', function() { 
 
     $('#tooltip').html('<b>Selected Value:</b>'); 
 
    }); 
 
    } 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://cdn.jsdelivr.net/chartist.js/0.9.5/chartist.min.js"></script> 
 
<link href="https://cdn.jsdelivr.net/chartist.js/0.9.5/chartist.min.css" rel="stylesheet" /> 
 
<div id="tooltip"><b>Selected Value:</b> 
 
</div> 
 
<div class="ct-chart"></div>

- 自分で何かをしたい場合は

オプション2

---

、あなたはdrawイベントのコールバックにmouseoverとmouseoutイベントをバインドすることができます