web-dev-qa-db-fra.com

Tracez une ligne horizontale sur le graphique dans chart.js sur v2

J'ai dessiné un graphique linéaire en utilisant chart.js. Pour les étiquettes et les jeux de données, j'obtiens des valeurs de la base de données. Je suis nouveau sur chart.js et sa bibliothèque très puissante, mais je n'arrive pas à le comprendre complètement. Je veux dessiner plusieurs lignes horizontales. Comme où si moyenne de l'ensemble de données, écart-type et min et max. J'ai essayé la question ici dans stackoverflow mais cela donne des erreurs ou peut-être que je ne suis pas en mesure de comprendre le fonctionnement. Ceci est mon code chart.js

function display_graph(id, label, data) {
var ctx = document.getElementById(id);
var data = {
    labels: data.labels,
    datasets: [
        {
            label: label,
            fill: false,
            lineTension: 0.1,
            backgroundColor: "rgba(75,192,192,0.4)",
            borderColor: "rgba(75,192,192,1)",
            borderCapStyle: 'butt',
            borderDash: [],
            borderDashOffset: 0.0,
            borderWidth: 1,
            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: data.assay_value,
            spanGaps: false
        }
    ]
};

//options
var options = {
    responsive: true,
    title: {
        display: true,
        position: "top",
        text: label,
        fontSize: 18,
        fontColor: "#111"
    },
    legend: {
        display: true,
        position: "bottom",
        labels: {
            fontColor: "#333",
            fontSize: 16
        }
    }
};
var Blanks_Chart=null;
Blanks_Chart = new Chart(ctx, {
    type: 'line',
    data: data,
    options: options
});}
javascriptjquerychartschart.js
14
tech_geek

Vous pouvez utiliser plugin d'annotation chart.js pour dessiner facilement des lignes sur votre graphique sans avoir à jouer avec le rendu des pixels dans votre toile manuellement (l'ancienne approche qui vous donne des erreurs). Remarque, le plugin est créé/pris en charge par la même équipe que chart.js et est mentionné dans les chart.js docs .

Voici un exemple codepen démontrant la création d'une ligne sur un graphique.

Une fois que vous avez ajouté le plugin, il vous suffit de définir les propriétés annotation dans votre configuration de graphique. Voici un exemple.

var myChart = new Chart(ctx, {
  type: 'line',
  data: {
    labels: ["January", "February"],
    datasets: [{
      label: 'Dataset 1',
      borderColor: window.chartColors.blue,
      borderWidth: 2,
      fill: false,
      data: [2, 10]
    }]
  },
  options: {
    responsive: true,
    title: {
      display: true,
      text: 'Chart.js Draw Line On Chart'
    },
    tooltips: {
      mode: 'index',
      intersect: true
    },
    annotation: {
      annotations: [{
        type: 'line',
        mode: 'horizontal',
        scaleID: 'y-axis-0',
        value: 5,
        borderColor: 'rgb(75, 192, 192)',
        borderWidth: 4,
        label: {
          enabled: false,
          content: 'Test label'
        }
      }]
    }
  }
});
29
jordanwillis

Voici un exemple pour le faire fonctionner dans une vue Rails si vous l'utilisez avec la gemme Chartkick:

<%=
  line_chart profit_per_day_chart_path(staff), xtitle: 'Day', ytitle: 'Profit',
    library: {
      annotation: {
        annotations: [
          {
            type: 'line',
            mode: 'horizontal',
            scaleID: 'y-axis-0',
            value: 20,
            label: {
              content: 'My Horizontal Line',
              enabled: true
            }
          }
        ]
      }
    }
%>

Assurez-vous que vous avez d'abord enregistré le plugin chartjs-plugin-annotation.js avec Chart.js:

import ChartAnnotationsPlugin from 'chartjs-plugin-annotation';
Chart.plugins.register(ChartAnnotationsPlugin);
0
stwr667

si vous voulez dessiner une ligne de seuil, la manière la plus simple est d'utiliser un graphique en courbes mixtes.

Remarque: créez un tableau rempli de valeurs de seuil et la longueur doit être identique à celle de votre ensemble de données.

var datasets = [1, 2, 3];
var ctx = document.getElementById('chart').getContext('2d');
var thresholdValue = 2;
var thresholdHighArray = new Array(datasets.length).fill(thresholdValue);
var myChart = new Chart(ctx, {
            type: 'line',
            data: {
                labels: [],
                datasets: [
                {datasets}, thresholdHighArray]
            },         
            options: {
                responsive: true,
                legend: {
                    position: 'bottom',
                },
                scales: {
                    xAxes: [{
                        display: true,
                        scaleLabel: {
                                display: true,
                                labelString: 'Readings'
                        }
                    }],
                    yAxes: [{
                        display: true,
                        scaleLabel: {
                                display: true,
                                labelString: 'Reading ( °C )'
                        }
                    }]
                },
                annotation: {
                  annotations: [
                    {
                      type: "line",
                      mode: "vertical",
                      scaleID: "x-axis-0",
                      borderColor: "red",
                      label: {
                        content: "",
                        enabled: true,
                        position: "top"
                      }
                    }
                  ]
                }
        });
    };
0
safeer sathar