Question

我有一个大型数据集，当绘制时有几个垂直部分，如下所示。 Chart.js使用薄的半透明着色格式化这些部分。我想格式化这些以匹配常规，粗实线条样式。

数据集本身通常位于名为data.js的单独文件中，但我从CodePen链接了一部分文件。

＆＃13;

<!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,
          },

        }],
      },
    },
    type: 'line',
    data: {
      labels: labels,
      datasets: [{
        fill: false,
        label: 'Graph Line',
        data: data,
        backgroundColor: 'rgba(0, 119, 204, 0.3)'
      }]
    }
  };
  var chart = new Chart(ctx, config);
</script>

</html>

＆＃13;

Answer 1

我明白了，当你看到图表时，你所看到的实际上只是个别点。由于点数据数量众多，起初并不明显，但线条比点宽度更薄。

垂直线条实在太薄了，实际上是因为那些格式化了线条设置。通过将点颜色和边框的透明度设置为0，并通过重新格式化线设置，我能够按照我的预期方式对其进行格式化。以下示例供其他人在将来遇到类似问题时参考。

<!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,
          },

        }],
      },
    },
    type: 'line',
    data: {
      labels: labels,
      datasets: [{
        lineTension: 0.4, //defaul val = 0.4
        pointBackgroundColor: 'rgba(0,0,0,0)',
        pointBorderColor: 'rgba(0,0,0,0)',
        borderColor: 'black',
        borderWidth: 4,
        fill: false,
        label: 'Graph Line',
        data: data,
      }]
    }
  };
  var chart = new Chart(ctx, config);
</script>

</html>

注意：我会在2天内接受这个答案，因为它是我自己的。

Chart.js中的行格式用于垂直步骤

1 个答案: