Гистограмма с накоплением по горизонтали с осью X - это категория времени - PullRequest
Новая
       10

Гистограмма с накоплением по горизонтали с осью X - это категория времени

0 голосов
/ 06 января 2020

Я сделал Линейный график через график js https://jsfiddle.net/elip123/aL4q6cuk/18/. 

var ctx = document.getElementById('mychart').getContext('2d');
ctx.canvas.width = 320;
ctx.canvas.height = 240;

var chart = new Chart(ctx, {
  type: 'line',
  data: {
      labels: [],
      legend: {
         display: true
      },
      datasets: [{
          fill: false,
          data: getHeightData(),
          label: 'Height',
          backgroundColor: "#FF2D00",
          borderColor: "#FF2D00",
          type: 'line',

      },
      {
          fill: false,
          data: getWeightData(),
          label: 'Weight',
          backgroundColor: "#0027FF",
          borderColor: "#0027FF",
          type: 'line',

      }]
  },
  options: {
    animation: false,
    responsive: true,
    scales: {
      xAxes: [{
          scaleLabel: {
            display: true,
            labelString: 'Time ( UTC )'
          },
          type: 'time',
          time: {
            tooltipFormat: "hh:mm",
            displayFormats: {
              hour: 'hh:mm'
            }
          },
          ticks: {
                    maxRotation: 90,
                    minRotation: 90
          }
      }],
      yAxes: [{
        scaleLabel: {
          display: true,
          labelString: 'Value'
        },
      }]
    }
  }
});

function getHeightData() {
  return [
    { x: new Date("2020-01-06 15:00:00"), y: 10 },
    { x: new Date("2020-01-06 14:00:00"), y: 20 },
    { x: new Date("2020-01-06 11:00:00"), y:8 },
    { x: new Date("2020-01-06 05:00:00"), y: 30 }

  ];
}

function getWeightData() {
  return [
    { x: new Date("2020-01-06 06:00:00"), y: 24 },
    { x: new Date("2020-01-06 07:00:00"), y:12 },
    { x: new Date("2020-01-06 08:00:00"), y: 4 },
    { x: new Date("2020-01-06 09:00:00"), y:8 }

  ];
}

Теперь я хочу переключить его на гистограмму с накоплением, как это enter image description here Я трачу много времени, чтобы найти и нарисовать его. Однако это действительно вызов для меня. Где мой сценарий проблемы? Должен ли я превратиться в высокую диаграмму, а не в диаграмму js? Пожалуйста, помогите мне

...