Chart.js 折线图

折线图是排列在工作表的列或行中的数据可以绘制到折线图中。

折线图可以显示随时间（根据常用比例设置）而变化的连续数据，因此非常适用于显示在相等时间间隔下数据的趋势。

折线图 type 属性为 line ，type 描述了图表类型。 

									const config = {
  type: 'line',
  data: data,
};

接下来我们创建一个简单的折线图：

实例

const ctx = document. getElementById ( 'myChart' ) ;
const labels = [ '一月份' , '二月份' , '三月份' , '四月份' , '五月份' , '六月份' , '七月份' ] ;   // 设置 X 轴上对应的标签
const data = {
  labels : labels ,
  datasets : [ {
    label : '我的第一个折线图' ,
    data : [ 65 , 59 , 80 , 81 , 56 , 55 , 40 ] ,
    fill : false ,
    borderColor : 'rgb(75, 192, 192)' , // 设置线的颜色
    tension : 0.1
  } ]
} ;
const config = {
  type : 'line' , // 设置图表类型
  data : data ,
} ;
const myChart = new Chart ( ctx , config ) ;

尝试一下 »

以上实例输出结果为：

接下来我们丰富一下折线图，添加选项，设置如下：

实例

const ctx = document. getElementById ( 'myChart' ) ;
const labels = [ '一月份' , '二月份' , '三月份' , '四月份' , '五月份' , '六月份' , '七月份' ] ;   // 设置 X 轴上对应的标签
const data = {
  labels : labels ,
  datasets : [ {
    label : '我的第一个折线图' ,
    data : [ 65 , 59 , 80 , 81 , 56 , 55 , 40 ] ,
    fill : false ,
    borderColor : 'rgb(75, 192, 192)' , // 设置线的颜色
        backgroundColor : [ 'rgba(179, 0, 33, 0.5)' ] , // 设置点的填充色
        pointStyle : 'circle' ,     //设置点类型为圆点
    pointRadius : 6 ,     //设置圆点半径
    pointHoverRadius : 10 , //设置鼠标移动上去后圆点半径
    tension : 0.1
  } ]
} ;
const config = {
  type : 'line' , // 设置图表类型
  data : data ,
  options : {
    responsive : true ,   // 设置图表为响应式

    interaction : {   // 设置每个点的交互
      intersect : false ,
    } ,
    scales : {   // 设置 X 轴与 Y 轴
      x : {
        display : true ,
        title : {
          display : true ,
          text : '日期'
        }
      } ,
      y : {
        display : true ,
        title : {
          display : true ,
          text : '票数'
        }
      }
    }
  }
} ;
const myChart = new Chart ( ctx , config ) ;

尝试一下 »

以上实例输出结果为：

垂直折线图

垂直折线图是水平折线图的变体。

垂直折线图需要将选项对象中的 indexAxis 属性设置为 y ，indexAxis 属性的默认值为 x 。

实例

const ctx = document. getElementById ( 'myChart' ) ;
const labels = [ '一月份' , '二月份' , '三月份' , '四月份' , '五月份' , '六月份' , '七月份' ] ;   // 设置 X 轴上对应的标签
const data = {
  labels : labels ,
  datasets : [ {
    label : '我的第一个折线图' ,
    data : [ 65 , 59 , 80 , 81 , 56 , 55 , 40 ] ,
    fill : false ,
    borderColor : 'rgb(75, 192, 192)' , // 设置线的颜色
        backgroundColor : [ 'rgba(179, 0, 33, 0.5)' ] , // 设置点的填充色
        pointStyle : 'circle' ,     //设置点类型为圆点
    pointRadius : 6 ,     //设置圆点半径
    pointHoverRadius : 10 , //设置鼠标移动上去后圆点半径
    tension : 0.1
  } ]
} ;
const config = {
  type : 'line' , // 设置图表类型
  data : data ,
  options : {
    indexAxis : 'y' , // 设置垂直折线图
    responsive : true ,   // 设置图表为响应式

    interaction : {   // 设置每个点的交互
      intersect : false ,
    } ,
    scales : {   // 设置 X 轴与 Y 轴
      x : {
                beginAtZero : true , // 设置 X 轴从 0 开始
        display : true ,
        title : {
          display : true ,
          text : '日期'
        }
      } ,
      y : {
        display : true ,
        title : {
          display : true ,
          text : '票数'
        }
      }
    }
  }
} ;
const myChart = new Chart ( ctx , config ) ;

尝试一下 »

以上实例输出结果为：