我想使用ChartJs進行多個數據工具提示

Question

我想當我將鼠標懸停在該點上時，它將顯示多個工具提示，如下方圖像。

我也在下面顯示我的代碼。

我想像這張圖片一樣

我的代碼看起來像這樣。

    <div class="col-sm-6"> <!-- My Html Code -->
        <h4 class="heading">Aylık Tıklanma ve Görüntülenme</h4>
        <canvas id="myLineChart" width="300" height="250"></canvas>
    </div> <!-- My Html Code -->


<div class="">  <!-- My JS-Php Code -->
        <script type="text/javascript">
        var canvas = document.getElementById('myLineChart');
        new Chart(canvas, {
        type: 'line',
        data: {
        labels: ["<?php echo ayGetir("-11"); ?>","<?php echo ayGetir("-10"); ?>","<?php echo ayGetir("-9"); ?>","<?php echo ayGetir("-8"); ?>","<?php echo ayGetir("-7"); ?>","<?php echo ayGetir("-6"); ?>","<?php echo ayGetir("-5"); ?>","<?php echo ayGetir("-4"); ?>","<?php echo ayGetir("-3"); ?>","<?php echo ayGetir("-2"); ?>","<?php echo ayGetir("-1"); ?>","<?php echo ayGetir("now"); ?>"],
        datasets: [{
          label: 'Tıklanma',
          yAxisID: 'A',
          data: ["<?php echo clickGetir($connectDb,$userr,aySayiGetir2("-11")); ?>","<?php echo clickGetir($connectDb,$userr,aySayiGetir2("-10")); ?>","<?php echo clickGetir($connectDb,$userr,aySayiGetir2("-9")); ?>","<?php echo clickGetir($connectDb,$userr,aySayiGetir2("-8")); ?>","<?php echo clickGetir($connectDb,$userr,aySayiGetir2("-7")); ?>","<?php echo clickGetir($connectDb,$userr,aySayiGetir2("-6")); ?>","<?php echo clickGetir($connectDb,$userr,aySayiGetir2("-5")); ?>","<?php echo clickGetir($connectDb,$userr,aySayiGetir2("-4")); ?>","<?php echo clickGetir($connectDb,$userr,aySayiGetir2("-3")); ?>","<?php echo clickGetir($connectDb,$userr,aySayiGetir2("-2")); ?>","<?php echo clickGetir($connectDb,$userr,aySayiGetir2("-1")); ?>","<?php echo clickGetir($connectDb,$userr,aySayiGetir2("now")); ?>"],
          backgroundColor: "rgba(0,255,0,0.2)",
          pointBorderColor: "rgba(75,192,192,1)",
          pointHoverBackgroundColor: "rgba(75,192,192,1)",
        pointRadius: 4,


          }, {
          label: 'Görüntülenme',
          yAxisID: 'B',
          data: ["<?php echo impGetir($connectDb,$userr,aySayiGetir2("-11")); ?>","<?php echo impGetir($connectDb,$userr,aySayiGetir2("-10")); ?>","<?php echo impGetir($connectDb,$userr,aySayiGetir2("-9")); ?>","<?php echo impGetir($connectDb,$userr,aySayiGetir2("-8")); ?>","<?php echo impGetir($connectDb,$userr,aySayiGetir2("-7")); ?>","<?php echo impGetir($connectDb,$userr,aySayiGetir2("-6")); ?>","<?php echo impGetir($connectDb,$userr,aySayiGetir2("-5")); ?>","<?php echo impGetir($connectDb,$userr,aySayiGetir2("-4")); ?>","<?php echo impGetir($connectDb,$userr,aySayiGetir2("-3")); ?>","<?php echo impGetir($connectDb,$userr,aySayiGetir2("-2")); ?>","<?php echo impGetir($connectDb,$userr,aySayiGetir2("-1")); ?>","<?php echo impGetir($connectDb,$userr,aySayiGetir2("now")); ?>"],
          backgroundColor: "rgba(255,255,0,0.4)",
          pointRadius: 4,
          pointBorderColor: "rgba(75,192,192,1)",
          pointHoverBackgroundColor: "rgba(75,192,192,1)",

        }]
        },
            options: {
                scales: {
                  yAxes: [{
                    id: 'A',
                    type: 'linear',
                    position: 'left',
                  }, {
                    id: 'B',
                    type: 'linear',
                    position: 'right'
                  }]
                }
            }
        });
        </script>

    </div><!-- My JS-Php Code -->

但是我想要像第一張圖片一樣，因為我的其他觀點沒有顯示出來。

如果您知道該怎么做，我需要您的幫助。 謝謝你們的幫助。

Answer 1

解決了

解決方案在這里；

<div class="">  <!-- line chart -->
        <script type="text/javascript">
        var canvas = document.getElementById('myLineChart');
        new Chart(canvas, {
        type: 'line',
        data: {
        labels: ["<?php echo ayGetir("-11"); ?>","<?php echo ayGetir("-10"); ?>","<?php echo ayGetir("-9"); ?>","<?php echo ayGetir("-8"); ?>","<?php echo ayGetir("-7"); ?>","<?php echo ayGetir("-6"); ?>","<?php echo ayGetir("-5"); ?>","<?php echo ayGetir("-4"); ?>","<?php echo ayGetir("-3"); ?>","<?php echo ayGetir("-2"); ?>","<?php echo ayGetir("-1"); ?>","<?php echo ayGetir("now"); ?>"],
        datasets: [{
          label: 'Tıklanma',
          yAxisID: 'A',
          data: ["<?php echo clickGetir($connectDb,$userr,aySayiGetir2("-11")); ?>","<?php echo clickGetir($connectDb,$userr,aySayiGetir2("-10")); ?>","<?php echo clickGetir($connectDb,$userr,aySayiGetir2("-9")); ?>","<?php echo clickGetir($connectDb,$userr,aySayiGetir2("-8")); ?>","<?php echo clickGetir($connectDb,$userr,aySayiGetir2("-7")); ?>","<?php echo clickGetir($connectDb,$userr,aySayiGetir2("-6")); ?>","<?php echo clickGetir($connectDb,$userr,aySayiGetir2("-5")); ?>","<?php echo clickGetir($connectDb,$userr,aySayiGetir2("-4")); ?>","<?php echo clickGetir($connectDb,$userr,aySayiGetir2("-3")); ?>","<?php echo clickGetir($connectDb,$userr,aySayiGetir2("-2")); ?>","<?php echo clickGetir($connectDb,$userr,aySayiGetir2("-1")); ?>","<?php echo clickGetir($connectDb,$userr,aySayiGetir2("now")); ?>"],
          backgroundColor: "rgba(0,255,0,0.2)",
          pointBorderColor: "rgba(75,192,192,1)",
          //pointHoverBackgroundColor: "rgba(75,192,192,1)",
          pointRadius: 4,
          fill: false
        },
        {
          label: 'Görüntülenme',
          yAxisID: 'B',
          data: ["<?php echo impGetir($connectDb,$userr,aySayiGetir2("-11")); ?>","<?php echo impGetir($connectDb,$userr,aySayiGetir2("-10")); ?>","<?php echo impGetir($connectDb,$userr,aySayiGetir2("-9")); ?>","<?php echo impGetir($connectDb,$userr,aySayiGetir2("-8")); ?>","<?php echo impGetir($connectDb,$userr,aySayiGetir2("-7")); ?>","<?php echo impGetir($connectDb,$userr,aySayiGetir2("-6")); ?>","<?php echo impGetir($connectDb,$userr,aySayiGetir2("-5")); ?>","<?php echo impGetir($connectDb,$userr,aySayiGetir2("-4")); ?>","<?php echo impGetir($connectDb,$userr,aySayiGetir2("-3")); ?>","<?php echo impGetir($connectDb,$userr,aySayiGetir2("-2")); ?>","<?php echo impGetir($connectDb,$userr,aySayiGetir2("-1")); ?>","<?php echo impGetir($connectDb,$userr,aySayiGetir2("now")); ?>"],
          backgroundColor: "rgba(255,255,0,0.4)",
          pointRadius: 4,
          pointBorderColor: "rgba(75,192,192,1)",
          //pointHoverBackgroundColor: "rgba(75,192,192,1)",
          fill: false
        }]
        },
            options: {
                tooltips: { // this code
                    mode: 'label', // this code
                }, // this code
                scales: {
                  yAxes: [{
                    id: 'A',
                    type: 'linear',
                    position: 'left',
                  }, {
                    id: 'B',
                    type: 'linear',
                    position: 'right'
                  }]
                }
            }
        });
        </script>

    </div>

是的:)（看起來像這樣）