Корзина js всплывающих подсказок отображается в неверном месте на графике - PullRequest
Новая
       9

Корзина js всплывающих подсказок отображается в неверном месте на графике

0 голосов
/ 08 февраля 2020

Я только что добавил tooltips: { mode: 'index', intersect: true } к этой конкретной настройке диаграммы

Проблема в том, что всплывающая подсказка всегда падает не в том месте

enter image description here

Итак, я нахожусь в определенной точке на графике, но всплывающая подсказка отображается в совершенно другом месте.

Есть идеи как исправить?

Ответы [ 2 ]

1 голос
/ 08 февраля 2020

К сожалению, я не могу воспроизвести проблему, которую вы описали, в приведенном ниже коде tooltips: { mode: 'index', intersect: true } работает просто отлично. Не могли бы вы предоставить готовый фрагмент кода, иллюстрирующий проблему, с которой вы столкнулись? 

const data = [{
    name: "series1",
    series: [{
            date: "2016-01-31T00:00:00.000Z",
            value: 8
        },
        {
            date: "2016-02-28T00:00:00.000Z",
            value: 10
        },
        {
            date: "2016-03-30T00:00:00.000Z",
            value: 12
        },
        {
            date: "2016-04-31T00:00:00.000Z",
            value: 15
        },
         {
            date: "2016-05-31T00:00:00.000Z",
            value: 14
        },
        {
            date: "2016-06-30T00:00:00.000Z",
            value: 16
        },
        {
            date: "2016-07-31T00:00:00.000Z",
            value: 17
        }
    ]
}, {
    name: "series2",
    series: [{
            date: "2016-01-31T00:00:00.000Z",
            value: 5
        },
        {
            date: "2016-02-28T00:00:00.000Z",
            value: 7
        },
        {
            date: "2016-03-30T00:00:00.000Z",
            value: 10
        },
        {
            date: "2016-04-31T00:00:00.000Z",
            value: 13
        },
         {
            date: "2016-05-31T00:00:00.000Z",
            value: 12
        },
        {
            date: "2016-06-30T00:00:00.000Z",
            value: 14
        },
        {
            date: "2016-07-31T00:00:00.000Z",
            value: 15
        }       
    ]
}];

new Chart(document.getElementById('myChart'), {
    type: 'line',
    data: {
        datasets: [
          {
              label: data[0].name,
              fill: false,
              backgroundColor: 'red',
              borderColor: 'red',
              data: data[0].series.map(x => ({ x: new Date(x.date), y: x.value }))
          }, {
              label: data[1].name,
              fill: false,
              backgroundColor: 'green',
              borderColor: 'green',
              data: data[1].series.map(x => ({ x: new Date(x.date), y: x.value }))
          }
        ]
    },
    options: {
        responsive: true,
        title: {
            display: false
        },
        legend: {
            display: true,
            position: 'top'
        },
        tooltips: { 
            mode: 'index', 
            intersect: true 
        },
        scales: {
            xAxes: [{
                type: 'time',
                time: {
                    unit: 'month',
                    displayFormats: {
                        'month': 'MMM YYYY',
                    },
                    tooltipFormat: 'MMM YYYY'
                }
            }],
        }
    }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.22.0/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.min.js"></script>
<canvas id="myChart" height="100"></canvas>
0 голосов
/ 08 февраля 2020

Из примера кода, который вы предоставили в своем комментарии к моему первому ответу, я вижу, что значения ваших наборов данных не начинаются с одной и той же x-позиции. Поэтому mode: 'index' не работает, и вы должны использовать вместо него mode: 'x'. 

tooltips: {
    mode: 'x'
}

Пожалуйста, посмотрите на ваш адаптированный код: 

const data = [{
  name: "series1",
  series: [{
    "date": "2015-02-28T00:00:00.000Z",
    "value": 4946
  }, {
    "date": "2015-03-31T00:00:00.000Z",
    "value": 7174
  }, {
    "date": "2015-04-30T00:00:00.000Z",
    "value": 6981
  }, {
    "date": "2015-05-31T00:00:00.000Z",
    "value": 9461
  }, {
    "date": "2015-06-30T00:00:00.000Z",
    "value": 13387
  }, {
    "date": "2015-07-31T00:00:00.000Z",
    "value": 24302
  }, {
    "date": "2015-08-31T00:00:00.000Z",
    "value": 9994
  }, {
    "date": "2015-09-30T00:00:00.000Z",
    "value": 14999
  }, {
    "date": "2015-10-31T00:00:00.000Z",
    "value": 17700
  }, {
    "date": "2015-11-30T00:00:00.000Z",
    "value": 50822
  }, {
    "date": "2015-12-31T00:00:00.000Z",
    "value": 50919
  }, {
    "date": "2016-01-31T00:00:00.000Z",
    "value": 48754
  }, {
    "date": "2016-02-29T00:00:00.000Z",
    "value": 29803
  }, {
    "date": "2016-03-31T00:00:00.000Z",
    "value": 67236
  }, {
    "date": "2016-04-30T00:00:00.000Z",
    "value": 96319
  }, {
    "date": "2016-05-31T00:00:00.000Z",
    "value": 124185
  }, {
    "date": "2016-06-30T00:00:00.000Z",
    "value": 141557
  }, {
    "date": "2016-07-31T00:00:00.000Z",
    "value": 132527
  }, {
    "date": "2016-08-31T00:00:00.000Z",
    "value": 140417
  }, {
    "date": "2016-09-30T00:00:00.000Z",
    "value": 135075
  }, {
    "date": "2016-10-31T00:00:00.000Z",
    "value": 191392
  }, {
    "date": "2016-11-30T00:00:00.000Z",
    "value": 227628
  }, {
    "date": "2016-12-31T00:00:00.000Z",
    "value": 243538
  }, {
    "date": "2017-01-31T00:00:00.000Z",
    "value": 293096
  }, {
    "date": "2017-02-28T00:00:00.000Z",
    "value": 345766
  }, {
    "date": "2017-03-31T00:00:00.000Z",
    "value": 519761
  }, {
    "date": "2017-04-30T00:00:00.000Z",
    "value": 448786
  }, {
    "date": "2017-05-31T00:00:00.000Z",
    "value": 572362
  }, {
    "date": "2017-06-30T00:00:00.000Z",
    "value": 580894
  }, {
    "date": "2017-07-31T00:00:00.000Z",
    "value": 660067
  }, {
    "date": "2017-08-31T00:00:00.000Z",
    "value": 709063
  }, {
    "date": "2017-09-30T00:00:00.000Z",
    "value": 812561
  }, {
    "date": "2017-10-31T00:00:00.000Z",
    "value": 874424
  }, {
    "date": "2017-11-30T00:00:00.000Z",
    "value": 1076463
  }, {
    "date": "2017-12-31T00:00:00.000Z",
    "value": 1049066
  }, {
    "date": "2018-01-31T00:00:00.000Z",
    "value": 1239827
  }, {
    "date": "2018-02-28T00:00:00.000Z",
    "value": 1081402
  }, {
    "date": "2018-03-31T00:00:00.000Z",
    "value": 1556783
  }, {
    "date": "2018-04-30T00:00:00.000Z",
    "value": 1443372
  }, {
    "date": "2018-05-31T00:00:00.000Z",
    "value": 1491657
  }, {
    "date": "2018-06-30T00:00:00.000Z",
    "value": 1606459
  }, {
    "date": "2018-07-31T00:00:00.000Z",
    "value": 1814560
  }, {
    "date": "2018-08-31T00:00:00.000Z",
    "value": 2231426
  }, {
    "date": "2018-09-30T00:00:00.000Z",
    "value": 2199441
  }, {
    "date": "2018-10-31T00:00:00.000Z",
    "value": 2752529
  }, {
    "date": "2018-11-30T00:00:00.000Z",
    "value": 2849511
  }, {
    "date": "2018-12-31T00:00:00.000Z",
    "value": 2902949
  }, {
    "date": "2019-01-31T00:00:00.000Z",
    "value": 3373373
  }, {
    "date": "2019-02-28T00:00:00.000Z",
    "value": 3369580
  }, {
    "date": "2019-03-31T00:00:00.000Z",
    "value": 4114746
  }, {
    "date": "2019-04-30T00:00:00.000Z",
    "value": 4097378
  }, {
    "date": "2019-05-31T00:00:00.000Z",
    "value": 4232173
  }, {
    "date": "2019-06-30T00:00:00.000Z",
    "value": 3995196
  }, {
    "date": "2019-07-31T00:00:00.000Z",
    "value": 4589346
  }, {
    "date": "2019-08-31T00:00:00.000Z",
    "value": 4575779
  }, {
    "date": "2019-09-30T00:00:00.000Z",
    "value": 4556959
  }, {
    "date": "2019-10-31T00:00:00.000Z",
    "value": 5275366
  }, {
    "date": "2019-11-30T00:00:00.000Z",
    "value": 5433849
  }, {
    "date": "2019-12-31T00:00:00.000Z",
    "value": 4935529
  }, {
    "date": "2020-01-29T00:00:00.000Z",
    "value": 4764600
  }]
}, {
  name: "series2",
  series: [{
    "date": "2016-10-31T00:00:00.000Z",
    "value": 648388
  }, {
    "date": "2016-11-30T00:00:00.000Z",
    "value": 693729
  }, {
    "date": "2016-12-31T00:00:00.000Z",
    "value": 773365
  }, {
    "date": "2017-01-31T00:00:00.000Z",
    "value": 975006
  }, {
    "date": "2017-02-28T00:00:00.000Z",
    "value": 1082831
  }, {
    "date": "2017-03-31T00:00:00.000Z",
    "value": 1350222
  }, {
    "date": "2017-04-30T00:00:00.000Z",
    "value": 1289953
  }, {
    "date": "2017-05-31T00:00:00.000Z",
    "value": 1499037
  }, {
    "date": "2017-06-30T00:00:00.000Z",
    "value": 1605640
  }, {
    "date": "2017-07-31T00:00:00.000Z",
    "value": 1726461
  }, {
    "date": "2017-08-31T00:00:00.000Z",
    "value": 1853198
  }, {
    "date": "2017-09-30T00:00:00.000Z",
    "value": 1885029
  }, {
    "date": "2017-10-31T00:00:00.000Z",
    "value": 2168899
  }, {
    "date": "2017-11-30T00:00:00.000Z",
    "value": 2369837
  }, {
    "date": "2017-12-31T00:00:00.000Z",
    "value": 2118275
  }, {
    "date": "2018-01-31T00:00:00.000Z",
    "value": 2708846
  }, {
    "date": "2018-02-28T00:00:00.000Z",
    "value": 2523632
  }, {
    "date": "2018-03-31T00:00:00.000Z",
    "value": 2862202
  }, {
    "date": "2018-04-30T00:00:00.000Z",
    "value": 2618252
  }, {
    "date": "2018-05-31T00:00:00.000Z",
    "value": 3179610
  }, {
    "date": "2018-06-30T00:00:00.000Z",
    "value": 3110572
  }, {
    "date": "2018-07-31T00:00:00.000Z",
    "value": 3433279
  }, {
    "date": "2018-08-31T00:00:00.000Z",
    "value": 4107825
  }, {
    "date": "2018-09-30T00:00:00.000Z",
    "value": 3785735
  }, {
    "date": "2018-10-31T00:00:00.000Z",
    "value": 4079134
  }, {
    "date": "2018-11-30T00:00:00.000Z",
    "value": 4072219
  }, {
    "date": "2018-12-31T00:00:00.000Z",
    "value": 3606818
  }, {
    "date": "2019-01-31T00:00:00.000Z",
    "value": 4512291
  }, {
    "date": "2019-02-28T00:00:00.000Z",
    "value": 4334171
  }, {
    "date": "2019-03-31T00:00:00.000Z",
    "value": 4657378
  }, {
    "date": "2019-04-30T00:00:00.000Z",
    "value": 4633421
  }, {
    "date": "2019-05-31T00:00:00.000Z",
    "value": 4803755
  }, {
    "date": "2019-06-30T00:00:00.000Z",
    "value": 4633593
  }, {
    "date": "2019-07-31T00:00:00.000Z",
    "value": 5140042
  }, {
    "date": "2019-08-31T00:00:00.000Z",
    "value": 5040706
  }, {
    "date": "2019-09-30T00:00:00.000Z",
    "value": 5256548
  }, {
    "date": "2019-10-31T00:00:00.000Z",
    "value": 5982276
  }, {
    "date": "2019-11-30T00:00:00.000Z",
    "value": 5633371
  }, {
    "date": "2019-12-31T00:00:00.000Z",
    "value": 4892260
  }, {
    "date": "2020-01-29T00:00:00.000Z",
    "value": 4887260
  }]
}];

new Chart(document.getElementById('myChart'), {
    type: 'line',
    data: {
        datasets: [
          {
              label: data[0].name,
              fill: false,
              backgroundColor: 'red',
              borderColor: 'red',
              data: data[0].series.map(x => ({ x: new Date(x.date), y: x.value }))
          }, {
              label: data[1].name,
              fill: false,
              backgroundColor: 'green',
              borderColor: 'green',
              data: data[1].series.map(x => ({ x: new Date(x.date), y: x.value }))
          }
        ]
    },
    options: {
        responsive: true,
        title: {
            display: false
        },
        legend: {
            display: true,
            position: 'top'
        },
        tooltips: { 
            mode: 'x'
        },
        scales: {
            xAxes: [{
                type: 'time',
                time: {
                    unit: 'month',
                    displayFormats: {
                        'month': 'MMM YYYY',
                    },
                    tooltipFormat: 'MMM YYYY'
                }
            }],
        }
    }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.22.0/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.min.js"></script>
<canvas id="myChart" height="100"></canvas>
...