charts js更改折线图轴的字体大小/颜色和背景线

charts js change line chart axis font size/color and background lines

本文关键字：颜色 背景 字体 js 折线图 charts      更新时间：2023-09-26

我一直试图更改背景线的颜色，以及轴的字体大小和颜色，但都无济于事。我目前正在使用最新版本的charts.js，似乎不知道如何进行更改。在旧版本的图表中，我可以更改它们，但该代码不再有效。

http://www.chartjs.org/docs

这是我的代码：

var lineoptions = {
    legend:{
      display:false
    },
    scales:{
      yAxes:[{
        display:false
      }]
    },
    tooltips:{
      enabled:false
    },
    elements:{
      point:{
        radius:4,
        borderWidth:2
      }
    }
  };
  var linedata = {
    labels:[
      "618",
      "39",
      "1734",
      "3459"
    ],
    datasets:[
    {
      data:[618,39,1734,3459],
      fill:false,
      borderColor:"rgba(227,6,20,1)",
      pointBorderColor:"rgba(227,6,20,1)",
      pointBackgroundColor:"rgba(255,255,255,1)",
      pointHoverBackgroundColor:"rgba(255,255,255,1)",
      pointHoverBorderColor:"rgba(227,6,20,1)",
    }]
  };
  var linechart = document.getElementById("canvas-line").getContext("2d");
  var myLineChart = new Chart(linechart,{
    type:'line',
    data:linedata,
    options:lineoptions
  });

*编辑*

我已经设法通过使用来更改轴信息的颜色

defaultFontColor:'#6d6e71',

但我仍然需要弄清楚如何更改图表本身的背景线（x和y线）。

好吧，我想好了：

scales:{
  xAxes:[{
    gridLines:{
      color:"rgba(255,255,255,0.5)",
      zeroLineColor:"rgba(255,255,255,0.5)"
    }
  }],
  yAxes:[{
    display:false
  }],
}
相关文章：