沿标签Chart.js更改线条的颜色

Question

我正在尝试沿Y轴和X轴更改线条的颜色和粗细。 我不知道我在文档中寻找什么，但现在已经在代码中命名了它们。

什么是被调用的行以及我应该为它起什么名称？

我希望保留红色标记内的线条但删除网格。

HTML

<canvas id="canvas-1"></canvas>

JS

  var randomScalingFactor = function(){ return Math.round(Math.random()*100)};
  var lineChartData = {
    labels : ['January','February','March','April','May','June','July'],
    datasets : [
      {
        label: 'My First dataset',
        labelColor : '#fff',
        fontColor : '#fff' ,
        backgroundColor : 'rgba(220,220,220,0.2)',
        borderColor : 'rgba(220,220,220,1)',
        pointBackgroundColor : 'rgba(220,220,220,1)',
        pointBorderColor : '#fff',
        data : [randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor()]
      }
    ]
  }

  var options = {
    responsive: true,
    maintainAspectRatio: false,
    legend: {
      fontColor: "white",
    },
    scales: {
      xAxes: [{
        gridLines: {
          display: true,
          drawBorder: true,
          color: "green",
        },
        ticks: {
          fontColor: "white",
        },
      }],
      yAxes: [{
        stacked: true,
        gridLines: {
          display: true,
          drawBorder: true,
          color: "blue",
        },
        ticks: {
          fontColor: "white",
          beginAtZero: true,
        }
      }]
    }
  };
  var ctx = document.getElementById('canvas-1');
  var chart = new Chart(ctx, {
    type: 'line',
    data: lineChartData,
    options: options
  });

Answer 1

要更改线条的颜色和粗细（沿x和y轴），请分别设置 color 和 lineWidth 属性轴的网格线，如下所示：

scales: {
   xAxes: [{
      gridLines: {
         display: false,
         color: 'green',
         lineWidth: 3
      },
      ...
   }],
   yAxes: [{
      gridLines: {
         display: false,
         color: '#07C',
         lineWidth: 3
      },
      ...
   }]
}

ᴡᴏʀᴋɪɴɢᴡᴏʀᴋɪɴɢxᴀᴍᴘʟᴇᴀᴍᴘʟᴇ

var randomScalingFactor = function() {
   return Math.round(Math.random() * 100)
};
var lineChartData = {
   labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
   datasets: [{
      label: 'My First dataset',
      labelColor: '#fff',
      fontColor: '#fff',
      backgroundColor: 'rgba(220,220,220,0.2)',
      borderColor: 'rgba(220,220,220,1)',
      pointBackgroundColor: 'rgba(220,220,220,1)',
      pointBorderColor: '#fff',
      data: [randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor()]
   }]
}

var options = {
   responsive: true,
   maintainAspectRatio: false,
   legend: {
      fontColor: "white",
   },
   scales: {
      xAxes: [{
         gridLines: {
            display: false,
            color: 'green',
            lineWidth: 3
         },
         ticks: {
            fontColor: "white",
         },
      }],
      yAxes: [{
         stacked: true,
         gridLines: {
            display: false,
            color: '#07C',
            lineWidth: 3
         },
         ticks: {
            fontColor: "white",
            beginAtZero: true,
         }
      }]
   }
};
var ctx = document.getElementById('canvas-1');
var chart = new Chart(ctx, {
   type: 'line',
   data: lineChartData,
   options: options
});

canvas { background: #222 }

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.6.0/Chart.min.js"></script>
<canvas id="canvas-1"></canvas>

Answer 2

修改

对于那些希望更改生成的图表行（而不是网格线）的人：

line选项适用于线型图，类似于您有doughnut类型等等。我相信你想出来了，对吧？

我的代码中的快速查看显示了可用于厚度的选项datasetStrokeWidth。 more info

对于样式选项，可以在strokeColor下找到颜色选项。

由于chart.js结合了数据 - 和样式选项，您的选项将如下所示：

var lineChartData = {
    line: {
        datasets: [
            {
                strokeColor: '#15bedb'                            
            }
        ]
    }
};

var lineChartStyle = {
    line: {
        datasetStrokeWidth: 1
    }
};

var ctx = document.getElementById('canvas-1');
var chart = new Chart(ctx, {
    type: 'line',
    data: lineChartData,
    options: lineChartStyle
});