Javascript 如何使 Chart JS 中的两条线更粗
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/38395036/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How can I make two of my lines in Chart JS thicker
提问by Stijn Westerhof
I have made a chart with Chart JS, as you can see in my fiddle. There are three lines in this chart. I want to have the orange and yellow line to be thicker than it is right now. The green dotted line is good as it is.
我用 Chart JS 制作了一个图表，你可以在我的fiddle 中看到。此图表中有三条线。我想让橙色和黄色的线比现在更粗。绿色虚线是好的。
I've searched around, and tried some things. But I haven't found the right solution yet. I hope that my question is clear, and that someone can help me with this.
我四处寻找，并尝试了一些东西。但我还没有找到正确的解决方案。我希望我的问题很清楚，并且有人可以帮助我解决这个问题。
HTML
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
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'
}
}]
}
}
})
回答by tektiv
You were close to it !
Actually, the attribute you have to edit is not lineWidthbut borderWidth(in the first exampleof Chart.js docs, you can see the attribute).
你离它很近了！
实际上，您必须编辑的属性不是lineWidth但是borderWidth（在Chart.js 文档的第一个示例中，您可以看到该属性）。
如所述 the exampleMDN 文档的例子
lineTolineTo：Use the beginPath() to begin a path to draw a line on, move the pen with moveTo() and use the stroke() method to actually draw the line.
使用 beginPath() 开始绘制一条线的路径，使用 moveTo() 移动笔并使用 stroke() 方法实际绘制线。
The line is basically a rectangle with a width of 0. Then the width of the line is calculated using the rectangle border width.
该线基本上是一个宽度为 的矩形0。然后使用矩形边框宽度计算线的宽度。
所以你只需要这样编辑你的数据集：
datasets: [{
// ...
borderWidth: 1 // and not lineWidth
// ...
}]
I also have updated your fiddlewith the edit, and you can see that it is working now.
我也用编辑更新了你的小提琴，你可以看到它现在正在工作。
回答by MarkDaDog
if this helps, or you still discern this method as presentable you can set the borderwidth relatively high like 50.
如果这有帮助，或者您仍然认为此方法可展示，您可以将边框宽度设置为相对较高，例如 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,
}
}
you check usePointStyleat the docs https://www.chartjs.org/docs/latest/configuration/legend.html#legend-label-configuration
您查看usePointStyle文档https://www.chartjs.org/docs/latest/configuration/legend.html#legend-label-configuration
