Chart.js - scaleType = 'date' not working

Использование Chart.js, я пытаюсь получить ось X (и toolping), чтобы показать DATE, но все, что я могу получить, - это большие целые числа, появляющиеся как x этикетка. Я сравнил то, что делает пример в документации, и я не вижу, что он делает, а я нет. Кто-нибудь может помочь?Chart.js - scaleType = 'date' not working

Вот крошечный пример, который я создал, показывая, что он не работает. (кстати - как второстепенный вопрос, обратите внимание, что если цвет красной линии пишется красным, а не красный, линия выглядит нормально, но всплывающие подсказки больше не работать на этой линии) 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>

источник

2016-10-03 user2191367

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

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, но вам нужно больше, так как вы знаете работу с элементом времени.

Вы можете:

Импорт Moment.js (CDN link), а затем Chart.min.js.
Импорт Chart.bundle.min.js, который содержит библиотеки Moment и Chart.

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

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

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

источник

2016-10-04 08:12:39 tektiv

спасибо, Tekiv! – user2191367

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

@ user2191367 С удовольствием! - Что касается редактирования всплывающей подсказки, проверьте [документацию о обратном вызове всплывающих подсказок] (http://www.chartjs.org/docs/#chart-configuration-tooltip-configuration) (* прокрутите список вниз до тех пор, пока «обратные вызовы всплывающих подсказок» *). Также проверьте эту [другую скрипку] (https://jsfiddle.net/oe1r8kbw/1/) с идеей о том, что вам нужно сделать. – tektiv

Chart.js - scaleType = 'date' not working

ответ

Смежные вопросы