Как я могу сделать две мои строки в диаграмме JS толще

Я сделал диаграмму с диаграммой JS, как вы можете видеть в моем fiddle. В этой таблице есть три строки. Я хочу, чтобы оранжевая и желтая линии были толще, чем сейчас. Зеленая пунктирная линия хороша, как есть.

Я искал вокруг и пробовал кое-что. Но я еще не нашел правильного решения. Надеюсь, что мой вопрос ясен, и кто-то может мне помочь в этом.

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'
        }
      }]
    }
  }
})

Ответ 1

Ты был близок к этому! Фактически, атрибут, который вы должны изменить, не lineWidth, а borderWidth (в первом примере в файлах Chart.js, вы можете видеть атрибут).

Как указано в примере документа MDN lineTo:

Используйте beginPath(), чтобы начать путь для рисования строки, переместите перо с помощью moveTo() и используйте метод stroke(), чтобы на самом деле рисовать линию.

Линия - это в основном прямоугольник с шириной 0. Затем ширина линии вычисляется с использованием ширины границы прямоугольника.

Поэтому вам просто нужно отредактировать свой набор данных таким образом:

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

У меня также есть обновил вашу скрипту с помощью редактирования, и вы можете видеть, что он работает сейчас.