如何使 Chart JS 中的两条线更粗

2022-01-22 00:00:00 javascript chart.js

我用 Chart JS 制作了一个图表，你可以在我的 fiddle 中看到.此图表中有三条线.我想让橙色和黄色的线比现在更粗.绿色虚线就是这样.

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.

我四处寻找，并尝试了一些东西.但是我还没有找到合适的解决方案.我希望我的问题很清楚，并且有人可以帮助我解决这个问题.

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

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

推荐答案

你已经接近它了！
实际上，您必须编辑的属性不是 lineWidth 而是 borderWidth (在 Chart.js 文档的第一个示例，你可以看到属性).<小时>如 MDN 文档的 示例 中所述lineTo 的:

You were close to it !
Actually, the attribute you have to edit is not lineWidth but borderWidth (in the first example of Chart.js docs, you can see the attribute).

As stated in the example of the MDN doc of lineTo :

使用 beginPath() 开始绘制线条的路径，使用 moveTo() 移动笔并使用 stroke() 方法实际绘制线条.

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.

这条线基本上是一个宽度为0的矩形.然后使用矩形边框宽度计算线的宽度.<小时>所以你只需要以这种方式编辑你的数据集:

The line is basically a rectangle with a width of 0. Then the width of the line is calculated using the rectangle border width.

So you simply have to edit your dataset this way :

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

我也有 用编辑更新了你的小提琴，你可以看到它现在正在工作.

I also have updated your fiddle with the edit, and you can see that it is working now.

相关文章