Jak mogę utworzyć dwie z moich linii w Tabeli JS grubszej

Question

Zrobiłem wykres z Chart JS, jak widać w moim fiddle. W tym wykresie są trzy linie. Chcę, aby pomarańczowa i żółta linia były grubsze niż teraz. Zielona linia przerywana jest dobra, jak jest.

Szukałem i próbowałem niektórych rzeczy. Ale nie znalazłem jeszcze odpowiedniego rozwiązania. Mam nadzieję, że moje pytanie jest jasne i że ktoś może mi w tym pomóc.

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

Answer 1

Byłaś blisko niego!
W rzeczywistości atrybut, który należy edytować, nie jest lineWidth, ale borderWidth (w dokumencie first example dokumentów Chart.js można zobaczyć atrybut).

---

Jak stwierdzono w the example z doc MDN z lineTo:

Użyj beginPath(), aby rozpocząć drogę, aby narysować linię na przesuń pióro z moveTo() i użyć metody stroke(), aby właściwie narysuj linię.

Linia jest w zasadzie prostokątem o szerokości 0. Następnie szerokość linii jest obliczana przy użyciu szerokości prostokąta.

---

Więc po prostu trzeba zmieniać zbioru danych w ten sposób:

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

Mam też updated your fiddle z edycji, i widać, że pracuje teraz.