Comment puis-je sauter des données/étiquettes dans une période de temps dans Chartjs ?

Question

Pouvez-vous me montrer comment je peux sauter des données dans une période de temps dans Chartjs ? Par exemple, j'ai des données de 10->11h30 am et 1h -> 2h pm. J'ai construit le graphique en type temps mais je veux sauter/supprimer la ligne de 11h30->1h ou 2hpm -> 10h.

options = {
    responsive: true,
    title: {
        display: true,
        text: 'Chart.js Time Point Data'
    },
    scales: {
        xAxes: [{
            type: 'time',
            display: true,
            stacked: true,
            scaleLabel: {
                display: true,
                labelString: 'Date'
            },
            ticks: {
                major: {
                    fontStyle: 'bold',
                    fontColor: '#FF0000'
                },
            },
        }],
        yAxes: [{
            stacked: true,
            display: true,
            scaleLabel: {
                display: true,
                labelString: 'value'
            },
        }]
    },
};

Numéro En attendant

Merci

Answer 1

Eh bien, Chart.JS montrera ce que labels y data contenir. Vous pouvez donc créer une fonction permettant de supprimer une certaine plage.

Voici un exemple avec un graphique linéaire : https://codepen.io/adelriosantiago/pen/xxRGVPW?editors=0010

La fonction rangeWithSkips sera essentiellement filter le tableau d'entrée entre startSkip y endSkip . Plus tard dans le code, vous sélectionnez la nouvelle plage avec :

data: {
  labels: rangeWithSkips(3, 10).labels, // Pick the starting and end range here
  datasets: [
    {
      label: "Volume",
      data: rangeWithSkips(3, 10).data // Pick the starting and end range here too
    }
  ]
}

Voici une version mise à jour qui fait exactement la même chose avec 2 entrées : https://codepen.io/adelriosantiago/pen/yLVNOGX?editors=1011