Неверное значение метки отображается при наведении курсора - Chart.JS - PullRequest
Новая
       24

Неверное значение метки отображается при наведении курсора - Chart.JS

5 голосов
/ 30 марта 2019

При наведении курсора на подсказку линейного графика отображается неверное значение метки на оси x. Я использую последнюю версию Chart.JS 2.8.0

Вот скрипка: https://jsfiddle.net/2mq1vt0o/

Это все данные из отображаемого набора данных: https://imgur.com/a/EMbiejk

Когда я изменяю диапазон данных, например, 05-01-2018 https://imgur.com/a/SXr6ymv

Как вы можете видеть, линия находится в правильном месте, но когда я наведу курсор на точку, она отображает метку, которая является первым значением из меток, что неверно, так как она должна отображаться 06-01-2018. 

{
  "data": {
    "datasets": [
      {
        "borderColor": "rgba(74,118,12,1.000)",
        "data": [
          {
            "x": "2018-01-06",
            "y": 0.242
          },
          {
            "x": "2018-01-07",
            "y": 0.197
          },
          {
            "x": "2018-01-08",
            "y": 0.15
          },
          {
            "x": "2018-01-09",
            "y": 0.15
          },
          {
            "x": "2018-01-10",
            "y": 0.15
          },
          {
            "x": "2018-01-11",
            "y": 0.137
          },
          {
            "x": "2018-01-12",
            "y": 0.11
          },
          {
            "x": "2018-01-13",
            "y": 0.11
          },
          {
            "x": "2018-01-14",
            "y": 0.21
          },
          {
            "x": "2018-01-15",
            "y": 0.273
          },
          {
            "x": "2018-01-16",
            "y": 0.3
          },
          {
            "x": "2018-01-17",
            "y": 0.237
          }
        ],
        "label": "onlydoe",
        "fill": false,
        "pointRadius": 5
      }
    ],
    "labels": [
      "2018-01-05",
      "2018-01-06",
      "2018-01-07",
      "2018-01-08",
      "2018-01-09",
      "2018-01-10",
      "2018-01-11",
      "2018-01-12",
      "2018-01-13",
      "2018-01-14",
      "2018-01-15",
      "2018-01-16",
      "2018-01-17"
    ]
  },
  "options": {
    "hover": {
      "mode": "x"
    }
  },
  "type": "line"
}

Я ожидаю, что при наведении на точку будет отображаться правильное значение оси X.

1 Ответ

1 голос
/ 12 мая 2019

Ну, я думаю, что это потому, что вы не указываете тип xAxis, поэтому попробуйте добавить это (к вашим параметрам): 

    "scales": {
         xAxes: [{
              type: "time"
                }]
    }

Вот пример (https://jsfiddle.net/z8xLspd7/1/):

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

    responsive:true,
    "scales": {
         xAxes: [{
              type: "time",
              time:{
                 format: timeFormat,
                 tooltipFormat: 'll'
                },
                scaleLabel: {
                    display:     true,
                    labelString: 'Date'
                }
            }]
        }

Здесьпример (https://jsfiddle.net/z8xLspd7/2/):

Ссылка: https://embed.plnkr.co/JOI1fpgWIS0lvTeLUxUp/

...