Блог

Главная - Вопросы по программированию - Chart.js — scaleType=’дата’ не работает

Chart.js — scaleType=’дата’ не работает

#chart.js #scaletype

#chart.js #scaletype

Вопрос:

Использование Chart.js , я пытаюсь заставить ось x (и toolips) отображать ДАТУ, но все, что я могу получить, — это большие целые числа, отображаемые в качестве метки оси x. Я сравнил, что делает пример в документации, и я не вижу, что он делает, чего я не делаю. Кто-нибудь может помочь?

Вот крошечный пример, который я создал, показывающий, что он не работает. (кстати, в качестве дополнительной проблемы обратите внимание, что если цвет КРАСНОЙ строки написан красным, а не красным, строка выглядит нормально, но всплывающие подсказки больше не работают в этой строке) https://plnkr.co/edit/CKUf4zFC1vhe3VNUF5Lf?p=preview

 javascript for the above plunker example is below
----------------------------------------------------
<!DOCTYPE html>
<html>
<head>
</head>

<body>
  <div>
    <canvas id="canvas"></canvas>

    <script>
      var chartData = {
        datasets: [{
          borderColor: 'Red',
          label: 'Capital R in borderColor, tooltips dont work',
          data: [{
            x: new Date('2011-04-11T11:45:00'),
            y: 25
          }, {
            x: new Date('2011-04-11T12:51:00'),
            y: 28
          }, {
            x: new Date('2011-04-11T14:10:00'),
            y: 22
          }, {
            x: new Date('2011-04-11T15:15:00'),
            y: 18
          }]
        }, {
          borderColor: 'green',
          label: 'borderColor all lower case, tooltips now work',
          data: [{
            x: new Date('2011-04-11T11:45:00'),
            y: 15
          }, {
            x: new Date('2011-04-11T12:51:00'),
            y: 18
          }, {
            x: new Date('2011-04-11T14:10:00'),
            y: 12
          }, {
            x: new Date('2011-04-11T15:15:00'),
            y: 8
          }]
        }, ]
      };


      window.onload = function() {

        var ctx = document.getElementById("canvas").getContext("2d");
        window.myScatterxx = Chart.Scatter(ctx, {
          data: chartData,
          scaleType: 'date',
          options: { title: { display: true, text: "scaleType='date' isn't working", fontSize:36} },
        });
      };
    </script>


    <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.2.1/Chart.min.js">
    </script>

</body>
</html>

Ответ №1:

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

 window.myScatterxx = Chart.Scatter(ctx, {
    data: chartData,
    options: {
        title: {
            display: true,
            text: "it is now working",
            fontSize: 36
        },
        scales: {
            xAxes: [{
                // This is the important part
                type: "time",
            }]
        }
    },
});

Теперь у вас есть правильный синтаксис, вам также нужно импортировать правильную библиотеку. Как я вижу из приведенного вами фрагмента кода, вы импортировали Chart.min.js , но вам нужно больше, поскольку вы знаете, как работать с элементом time.

Вы можете либо :

Наконец, я также заметил, что в вашем коде у вас возникла проблема с отображением всплывающих подсказок для красного набора данных. Это потому, что вы определили его цвет как Red . Измените его на red и всплывающие подсказки снова будут работать :

 datasets: [{
    borderColor: 'red',
    label: 'Capital R in borderColor, tooltips now work',
    data: [
        // ...
    ]
}]

Вы можете увидеть все эти исправления в этом jsFiddle, и вот конечный результат :

введите описание изображения здесь

Комментарии:

1. Большое спасибо, Текив!

2. Следующий вопрос, который, я надеюсь, тоже прост, заключается в том, как я могу настроить всплывающую подсказку, чтобы показывать только часть даты без времени? В моем реальном приложении важна только дата. кстати — на красный против красного. Я понял, что все строчные буквы в цвете заставляют всплывающие подсказки работать. Но это непоследовательно в том смысле, что цвет «Красный» делает цвет строки красным, но он нарушает всплывающую подсказку. Похоже, внутренне сравнение цветов с добавлением a . Вызов toLowerCase() сделал бы его более щадящим. Еще раз, большое спасибо!

3. @user2191367 Очень приятно ! — Что касается редактирования всплывающих подсказок, ознакомьтесь с документацией об обратном вызове всплывающих подсказок ( прокрутите немного вниз до «Обратные вызовы всплывающих подсказок» ). Также проверьте эту другую скрипку с идеей о том, что вам нужно сделать.

4. Еще раз спасибо Tektiv! Это именно то, что мне было нужно

5. @user2191367 Рад, что я помог!