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

How can I make two of my lines in Chart JS thicker(如何使 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.

这篇关于如何使 Chart JS 中的两条线更粗的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持编程学习网！