Chart.js中垂直分段线条的格式设置需求

我明白你的需求——你的折线图因为数据结构出现了多个垂直分段，默认的线条样式是细半透明，想要改成和常规折线一致的粗实线条。下面给你具体的解决方案和修改后的代码：

核心修改点 #

如果你的“垂直分段”指的是折线本身的分段线条（数据点之间的连接线），只需要在数据集配置里添加borderColor和borderWidth属性，强制设置线条的颜色和粗细；如果指的是x轴的垂直网格线，则需要在x轴的配置里修改网格线的样式。

修改后的完整代码 #

<!DOCTYPE html>
<html>
<head>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.js"></script>
  <!-- NOT USED FOR THIS EXAMPLE <script src="data.js"></script> -->
  <script src="https://codepen.io/EtherealBug/pen/wjOdoa.js"></script>
</head>
<body>
  <canvas id="myChart"></canvas>
</body>
<style>
  canvas {
    width: 100% !important;
    max-width: 2000px;
    height: auto !important;
  }
</style>
<script>
  var labels = jsonfile.jsonarray.map(function(e) {
    return e.Time;
  });
  var data = jsonfile.jsonarray.map(function(e) {
    return e.Speed;
  });
  var ctx = myChart.getContext('2d');
  var config = {
    options: {
      legend: {
        position: 'bottom',
      },
      scales: {
        xAxes: [{
          scaleLabel: {
            fontSize: 12,
            fontStyle: 'bold',
            display: true,
            labelString: 'Y(1)'
          },
          ticks: {
            autoSkip: true,
            maxTicksLimit: 30,
          },
          // 如果你需要修改x轴垂直网格线，取消下面注释
          // gridLines: {
          //   color: 'rgba(0, 119, 204, 1)',
          //   lineWidth: 2
          // }
        }],
      },
    },
    type: 'line',
    data: {
      labels: labels,
      datasets: [{
        fill: false,
        label: 'Graph Line',
        data: data,
        backgroundColor: 'rgba(0, 119, 204, 0.3)',
        // 新增折线分段线条的样式配置
        borderColor: 'rgba(0, 119, 204, 1)',
        borderWidth: 2
      }]
    }
  };
  var chart = new Chart(ctx, config);
</script>
</html>

代码说明 #

1. 折线分段线条修改：在datasets的对象中，borderColor设置为和背景色同色系的不透明蓝色，确保线条是实色；borderWidth设为2（你可以根据需求调整数值），让线条更粗，和常规折线样式统一。
2. x轴垂直网格线修改：如果你的“垂直分段”指的是x轴的网格线，只需要取消gridLines部分的注释，设置对应的颜色和线宽即可。

内容的提问来源于stack exchange，提问作者EtherealBug