web-dev-qa-db-fra.com

Comment puis-je rendre plus épais deux de mes lignes dans le graphique JS?

J'ai créé un graphique avec le graphique JS, comme vous pouvez le constater dans mon violon . Il y a trois lignes dans ce graphique. Je veux que les lignes orange et jaune soient plus épaisses qu’aujourd’hui. La ligne pointillée verte est bonne telle quelle.

J'ai cherché et essayé certaines choses. Mais je n'ai pas encore trouvé la bonne solution. J'espère que ma question est claire et que quelqu'un peut m'aider avec cela.

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.1.6/Chart.min.js" charset="utf-8"></script>
<canvas id="canvas2"></canvas>

JavaScript

Chart.defaults.global.legend.display = false;
var lineChartData = {
labels: ['20°', '30°', '40°', '50°', '60°', '70°', '80°'],
datasets: [{
  data: [null, null, null, 400, 320, 220, 90],
  pointBorderColor: "rgba(75,192,192,1)",
  pointBackgroundColor: "#fff",
  borderColor: '#FFEC8B',
  pointBorderWidth: 0,
  pointHoverRadius: 0,
  pointHoverBackgroundColor: "rgba(75,192,192,1)",
  pointHoverBorderColor: "rgba(220,220,220,1)",
  pointHoverBorderWidth: 0,
  lineWidth: 100,
  pointRadius: 0,
  pointHitRadius: 0,
},{
  data: [550, 520, 470, 400, null, null, null],
  borderColor: '#ff8800',
  pointBorderWidth: 0,
  pointHoverRadius: 0,
  pointHoverBackgroundColor: "rgba(75,192,192,1)",
  pointHoverBorderColor: "rgba(220,220,220,1)",
  pointHoverBorderWidth: 0,
  pointRadius: 0,
  pointHitRadius: 0,
},
{
    data: [220, 220, 220, 220, 220, 220, 220],
    borderColor: '#008080',
    borderDash: [10, 10],
    pointBorderWidth: 0,
    pointHoverRadius: 0,
    pointHoverBackgroundColor: "rgba(75,192,192,1)",
    pointHoverBorderColor: "rgba(220,220,220,1)",
    pointHoverBorderWidth: 0,
    pointRadius: 0,
    pointHitRadius: 0,
  }
]
};

var ctx = document.getElementById("canvas2").getContext("2d");
var myChart = new Chart(ctx, {
 type: "line",
 beginAtZero: true,
 scaleOverride:true,
 scaleSteps:9,
 scaleStartValue:0,
 lineWidth: 100,
 scaleStepWidth:100,
 data: lineChartData,
 options: {
    elements: {
        line: {
            fill: false
        }
    },
    style: {
      strokewidth: 10
    },
    scales: {
      xAxes: [{
        display: true,
        scaleLabel: {
          display: true,
          labelString: 'Temperatuur - Celcius'
        }
      }],
      yAxes: [{
        display: true,
        ticks: {
            max: 600,
            min: 0,
            stepSize: 200,
            userCallback: function(value, index, values) {
                value = value.toString();
                value = value.split(/(?=(?:...)*$)/);
                value = value.join('.');
                return value + '%';
              }
        },
        scaleLabel: {
          display: true,
          labelString: 'Rendement'
        }
      }]
    }
  }
})

javascriptchart.js
14
Stijn Westerhof

Vous en étiez proche!
En fait, l'attribut que vous devez éditer n'est pas lineWidth mais borderWidth (dans le premier exemple de la documentation Chart.js, vous pouvez voir l'attribut) .

Comme indiqué dans l'exemple du document MDN de lineTo :

Utilisez beginPath () pour commencer un chemin sur lequel tracer une ligne, déplacez le stylet avec moveTo () et utilisez la méthode stroke () pour tracer la ligne.

La ligne est fondamentalement un rectangle avec une largeur de 0. Ensuite, la largeur de la ligne est calculée à l'aide de la largeur du bord du rectangle .

Il vous suffit donc de modifier votre jeu de données de la manière suivante:

datasets: [{
    // ...
    borderWidth: 1 // and not lineWidth
    // ...
}]

J'ai aussi mis à jour votre violon avec l'édition, et vous pouvez voir qu'il fonctionne maintenant.

27
tektiv

si cela vous aide ou si vous estimez toujours que cette méthode est présentable, vous pouvez définir une largeur de bordure relativement élevée, par exemple 50.

datasets:[{
    borderWidth: 50
}]
 //at your options put this
 options: {
            legend: {
                display: true,
                labels: {
                    fontSize: 16, //point style's size is based on font style not boxed width.
                    usePointStyle:true,
                }
            }

vous cochez usePointStyle dans docs https://www.chartjs.org/docs/latest/configuration/legend.html#legend-label-configuration

0
MarkDaDog