是否可以显示所有线条的标签?

时间:2017-09-27 05:33:25

标签: javascript chart.js

基本上我有基于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'
                    }
                }]
            }
        }
    });

1 个答案:

答案 0 :(得分:3)

我假设你在谈论工具提示标签。在这种情况下,您可以在图表选项配置中将工具提示模式设置为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>