Wykres liniowy Chart.js z różnymi etykietami dla każdego zestawu danych

Question

Za pomocą Chart.js można tworzyć wykresy liniowe, a do tego należy używać etykiet i zestawów danych. na przykład:

var data = { 
    labels: ["January", "February", "March", "April", "May", "June", "July"], 
    datasets: [ 
     { 
      label: "My First dataset", 
      fill: false, 
      lineTension: 0.1, 
      backgroundColor: "rgba(75,192,192,0.4)", 
      borderColor: "rgba(75,192,192,1)", 
      borderCapStyle: 'butt', 
      borderDash: [], 
      borderDashOffset: 0.0, 
      borderJoinStyle: 'miter', 
      pointBorderColor: "rgba(75,192,192,1)", 
      pointBackgroundColor: "#fff", 
      pointBorderWidth: 1, 
      pointHoverRadius: 5, 
      pointHoverBackgroundColor: "rgba(75,192,192,1)", 
      pointHoverBorderColor: "rgba(220,220,220,1)", 
      pointHoverBorderWidth: 2, 
      pointRadius: 1, 
      pointHitRadius: 10, 
      data: [65, 59, 80, 81, 56, 55, 40], 
     } 
    ] 
}; 

Problem jest to, że masz ustalony okres etykiet (7 w tym przypadku) i trzeba także dają 7 wpisy dane dla każdego zestawu danych. A co jeśli masz nieznaną liczbę etykiet i wpisów danych?

Co jeśli jedna pozycja danych zawiera numer i czas:

Entry { 
    number: 127 
    time: 10:00 
} 

Co zrobić, jeśli chcesz pokazać wszystkie razy na osi X i wszystkich liczb na osi Y posortowane według czasu na Oś X. Czy to możliwe z Chart.js?

Answer 1

Ponieważ w poście jest wiele pytań, postaram się pomóc przynajmniej niektórym z nich. W przypadku modelu wpisu z liczbą i czasem należy utworzyć rozproszony wykres. Tutaj definiujesz obiekty danych z wartościami x i y, jak pokazano w moim przykładzie poniżej. Wymaga to, aby każdy wpis x miał odpowiadający y. Spójrz na wykres punktowy. http://www.chartjs.org/docs/#line-chart-scatter-line-charts

var d = new Date(); 
var scatterChart = new Chart(ctx, { 
    type: 'line', 
    data: { 
     datasets: [{ 
      label: 'Scatter Dataset', 
      data: [{ 
       x: new Date().setDate(d.getDate()-5), 
       y: 0 
      }, { 
       x: new Date(), 
       y: 10 
      }, { 
       x: new Date().setDate(d.getDate()5), 
       y: 5 
      }] 
     }] 
    }, 
    options: { 
     scales: { 
      xAxes: [{ 
        type: "time", 
        time: { 
         format: "HH:mm", 
         unit: 'hour', 
         unitStepSize: 2, 
         displayFormats: { 
          'minute': 'HH:mm', 
          'hour': 'HH:mm' 
         }, 
         tooltipFormat: 'HH:mm' 
        }, 
        gridLines: { 
         display: false 
        } 
       }], 
     } 
    } 
}); 

Answer 2

miałem walkę z tym dzisiaj. Musisz uzyskać bardziej szczegółowe informacje o swoim zestawie danych. Na wykresie liniowym "zbiory danych" to tablica z każdym elementem tablicy reprezentującym linię na wykresie. Chart.js jest tutaj naprawdę bardzo elastyczny, gdy już to zrobisz. Możesz powiązać linię (element zbioru danych) z osią X i/lub osią Y, z których każda może być szczegółowo określona.

W twoim przypadku, jeśli trzymamy się pojedynczej linii na wykresie i chcesz, aby część "czas" wpisu znajdowała się na dole (oś x), wtedy wszystkie twoje czasy mogłyby przejść do "etykiet" array i twoja "liczba" byłaby wskazywana na osi Y. Aby utrzymać to proste bez określania własnych skal z osi x i y, a biorąc pod uwagę te dane:

var MyData = [{time:"10:00", number: "127"}, 
       {time:"11:00", number: "140"}, 
       {time:"12:00", number: "135"}, 
       {time:"13:00", number: "122"}]; 

Można skonfigurować „dane” własność wykresie być:

var data = { 
    labels: ["10:00", "11:00", "12:00", "13:00"], 
    datasets: [ 
     { 
      label: "My First dataset", 

      // Insert styling, colors etc here 

      data: [{x: "10:00", y: 127}, 
        {x: "11:00", y: 140}, 
        {x: "12:00", y: 135}, 
        {x: "13:00", y: 122}] 
     } 
    ]}; 

Należy pamiętać, że tablica danych jest teraz nieco bardziej specyficzna dla każdego elementu danych kreślących się na osi X, odwołując się do jednej z etykiet, a nie tylko do liczby nieprzetworzonej. Możesz teraz umieścić inny obiekt zbioru danych w tablicy zestawów danych zgodnie z tym wzorcem i mieć dwie linie, oczywiście nadaj swoim wierszom różne kolory i nazwy ("etykieta").

Mam nadzieję, że to pomoże.