Как создать многострочный график с разными надписями

Question

Мне нужно создать график, который содержит разные цены с разных сайтов и не берет в одно и то же время. На самом деле я использую библиотеку javascript chart.js. Я хочу знать, возможно ли иметь на одну и ту же дату разные цифры и разные точки?

    "{
      "site1":[
         {
           "datetime":"2019-01-09 14:43:58",
           "price":"649.99"
         },
         {
           "datetime":"2019-01-09 14:44:17",
           "price":"649.99"
         },
         {
           "datetime":"2019-01-09 15:02:59",
           "price":"649.99"
          },
          {
            "datetime":"2019-01-09 15:05:43",
            "price":"649.99"
          },
          {
            "datetime":"2019-01-09 15:08:52",
            "price":"649.99"
          },
          {
            "datetime":"2019-01-09 15:16:51",
            "price":"649.99"
          }
       ],
       "site2":[
         {
           "datetime":"2019-01-09 15:03:05",
           "price":"0"
         },
         {
           "datetime":"2019-01-09 15:05:52",
           "price":"804.91"
         },
         {
           "datetime":"2019-01-09 15:09:00",
           "price":"804.91"
         },
         {
           "datetime":"2019-01-09 15:16:58",
           "price":"804.91"
         }
       ]
     }"

Это образец данных для графика.

Извините, если мое объяснение не простое.

Спасибо

Answer 1

Да, это возможно при использовании оси времени . Вам нужно будет переделать ваши данные в соответствии с требуемым форматом ввода; Пример этого приведен во фрагменте ниже с использованием forEach.

Важно отметить, что Chart.js требует Moment.js для обработки даты и времени. Не забудьте включить Moment.js перед Chart.js или использовать Chart.js в комплекте .

let j = {
    "site1": [{
        "datetime": "2019-01-09 14:43:58",
        "price": "649.99"
      },
      {
        "datetime": "2019-01-09 14:44:17",
        "price": "649.99"
      },
      {
        "datetime": "2019-01-09 15:02:59",
        "price": "649.99"
      },
      {
        "datetime": "2019-01-09 15:05:43",
        "price": "649.99"
      },
      {
        "datetime": "2019-01-09 15:08:52",
        "price": "649.99"
      },
      {
        "datetime": "2019-01-09 15:16:51",
        "price": "649.99"
      }
    ],
    "site2": [{
        "datetime": "2019-01-09 15:03:05",
        "price": "0"
      },
      {
        "datetime": "2019-01-09 15:05:52",
        "price": "804.91"
      },
      {
        "datetime": "2019-01-09 15:09:00",
        "price": "804.91"
      },
      {
        "datetime": "2019-01-09 15:16:58",
        "price": "804.91"
      }
    ]
  },
  k = Object.keys(j),
  datasets = [];

// remodel the data so it can be provided direct to Chart.js
k.forEach(function(val) {
  let d = {
    label: val,
    data: []
  };

  j[val].forEach(function(val2) {
    d.data.push({
      x: val2.datetime,
      y: val2.price
    });
  });

  datasets.push(d);
});

// create the chart.
new Chart(document.getElementById('canvas'), {
  type: 'line',
  data: {
    datasets: datasets
  },
  options: {
    scales: {
      xAxes: [{
        type: 'time'
      }]
    }
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.3/Chart.bundle.min.js"></script>
<canvas id="canvas"></canvas>

Answer 2

Этого можно достичь, используя Chart.js + Moment.js, когда вы строите график в зависимости от времени.

См. Приведенный ниже код или скрипку -> http://jsfiddle.net/goz3jehy/4/

var config = {
  type: 'line',
  data: {
    datasets: [{
        label: "site1",
        backgroundColor: 'red',
        borderColor: 'pink',
        fill: false,
        data: [{
            x: '2019-01-09 14:43:58',
            y: 649.99
          },
          {
            x: '2019-01-09 14:44:17',
            y: 649.99
          },
          {
            x: "2019-01-09 15:02:59",
            y: 649.99
          },
          {
            x: "2019-01-09 15:05:43",
            y: 649.99
          },
          {
            x: "2019-01-09 15:08:52",
            y: 649.99
          },
          {
            x: "2019-01-09 15:16:51",
            y: 700
          }
        ],
      },
      {
        label: "site2",
        backgroundColor: 'orange',
        borderColor: 'yellow',
        fill: false,
        data: [{
            x: "2019-01-09 15:03:05",
            y: 0
          },
          {
            x: "2019-01-09 15:05:52",
            y: 804.91
          },
          {
            x: "2019-01-09 15:09:00",
            y: 804.91
          },
          {
            x: "2019-01-09 15:16:58",
            y: 804.91
          }
        ],
      }
    ]
  },
  options: {
    scales: {
      xAxes: [{
        type: 'time',
        time: {          
        }
      }],
    },
  }
};

var ctx = document.getElementById("myChart").getContext("2d");
new Chart(ctx, config);