javascript - 是否可以显示所有行的标签？

Question

基本上我有基于 ChartJS 的折线图，有两条线。 X 轴有日期，Y 轴有价格。

有两行(一行表示平均价格，一行表示最低价格)。

所以我想知道，是否有可能，假设我将鼠标悬停在最低价格的点上，平均价格点的标签也会弹出，反之亦然。

或者，如果这是不可能的，也许可以使每个标签包含两个值(该特定日期的最低价格和平均价格)。

这是我到目前为止的代码:

var ctx = document.getElementById('price-history').getContext('2d');
    ctx.height = 150;
    var chart = new Chart(ctx, {
        type: 'line',
        data: {
            labels: <?= json_encode($priceChangeData['labels']); ?>,
            datasets: [
                {
                    label: 'Minimali kaina',
                    backgroundColor: 'rgb(64, 127, 178)',
                    borderColor: 'rgb(64, 127, 178)',
                    borderWidth: 1,
                    data: <?= json_encode($priceChangeData['line']['price_min']); ?>,
                    fill: false
                },
                {
                    label: 'Vidutinė kaina',
                    backgroundColor: '#686868',
                    borderColor: '#686868',
                    borderWidth: 1,
                    data: <?= json_encode($priceChangeData['line']['price_avg']); ?>,
                    fill: false
                }
            ],
        },
        options: {
            responsive: true,
            layout: {
                padding: {
                    left: 20,
                    right: 15
                }
            },
            scales: {
                xAxes: [{
                    display: true,
                    scaleLabel: {
                        display: false,
                        labelString: 'Data'
                    }
                }],
                yAxes: [{
                    display: true,
                    stacked: false,
                    scaleLabel: {
                        display: false,
                        labelString: 'Kaina'
                    }
                }]
            }
        }
    });

Answer 1

我假设您正在谈论工具提示的标签。在这种情况下，您可以将工具提示模式设置为 index在图表的选项配置中，如下所示:

options: {
      tooltips: {
         mode: 'index'
      },
      ...

ᴡᴏʀᴋɪɴɢ ᴇxᴀᴍᴘʟᴇ ⧩

var ctx = document.getElementById('price-history').getContext('2d');
ctx.height = 150;
var chart = new Chart(ctx, {
   type: 'line',
   data: {
      labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May'], //<?= json_encode($priceChangeData['labels']); ?>,
      datasets: [{
         label: 'Minimali kaina',
         backgroundColor: 'rgb(64, 127, 178)',
         borderColor: 'rgb(64, 127, 178)',
         borderWidth: 1,
         data: [3, 1, 4, 2, 5], //<?= json_encode($priceChangeData['line']['price_min']); ?>,
         fill: false
      }, {
         label: 'Vidutinė kaina',
         backgroundColor: '#686868',
         borderColor: '#686868',
         borderWidth: 1,
         data: [2, 4, 1, 5, 3], //<?= json_encode($priceChangeData['line']['price_avg']); ?>,
         fill: false
      }],
   },
   options: {
      responsive: true,
      tooltips: {
         mode: 'index'
      },
      layout: {
         padding: {
            left: 20,
            right: 15
         }
      },
      scales: {
         xAxes: [{
            display: true,
            scaleLabel: {
               display: false,
               labelString: 'Data'
            }
         }],
         yAxes: [{
            display: true,
            stacked: false,
            scaleLabel: {
               display: false,
               labelString: 'Kaina'
            }
         }]
      }
   }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.0/Chart.min.js"></script>
<canvas id="price-history"></canvas>