Диаграмма JS: линейный график с метками на оси Y - PullRequest
Новая
       19

Диаграмма JS: линейный график с метками на оси Y

0 голосов
/ 20 апреля 2020

Я новичок в графике. js и мне нужно создать линейный график с метками на оси Y. Есть много примеров в Интернете с метками на оси х, но что мне нужно, это линейный график с метками на оси у и числами на оси х?

1 Ответ

0 голосов
/ 26 апреля 2020

Сначала вы должны определить значения для вертикальной оси в параметре конфигурации диаграммы data.yLabels.

Затем вы определяете yAxis как декартову ось категории .

Кроме того, вам необходимо определить xAxis как декартову ось времени . Также убедитесь, что data вашего набора данных определен как отдельные точки через объекты, содержащие свойства x и y.

Обратите внимание, что диаграмма. js внутренне использует Момент. js для функциональности оси времени. Поэтому вам следует использовать связанную версию Chart. js, которая включает в себя Момент. js в одном файле.

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

new Chart(document.getElementById('myChart'), {
  type: 'line',  
  data: {
    yLabels: ['Suspended',  'Faulty', 'At-risk', 'Unknown', 'Healthy'],
    datasets: [{
      label: 'My Dataset',
      data: [
        { x: '20:28', y: 'Healthy' },
        { x: '20:47', y: 'Healthy' }
      ],
      backgroundColor: 'lightblue',
      borderColor: 'blue',
      fill: false
    }]
  },
  options: {
    responsive: true,
    title: {
      display: false
    },
    legend: {
      display: false
    },
    scales: {
      yAxes: [{
        type: 'category',
        ticks: {
          reverse: true,
		    },
        gridLines: {
          zeroLineColor: 'rgba(0, 0, 0, 0.1)'
        }
      }],
      xAxes: [{
        type: 'time',
        time: {
          parser: 'HH:mm',
          unit: 'minute',
          stepSize: 5,
          tooltipFormat: 'HH:mm'
        },
        ticks: {
          min: '20:25',
          max: '20:50',
          padding: 10
		    },
        gridLines: {
          display: false
        }
      }],
    }
  }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.bundle.min.js"></script>
<canvas id="myChart" height="80"></canvas>
...