如何使Chart JS中的两行变粗 [英] How can I make two of my lines in Chart JS thicker

问题描述

我已经使用Chart JS创建了一个图表，您可以在我的小提琴中看到。此图表中有三行。我希望橙色和黄色线比现在更厚。绿色的虚线很好。

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文档的第一个示例，您可以看到该属性）。

---

如 <$ c的MDN文档示例 $ c> 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中的两行变粗的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！