Chart.js 散点图

散点图是由两组数据构成多个坐标点，考察坐标点的分布，判断两变量之间是否存在某种关联或总结坐标点的分布模式。

数据结构： 

									data: [{
        x: 10,
        y: 20
    }, {
        x: 15,
        y: 10
    }]

散点图 type 属性为 scatter 。 

									const config = {
  type: 'scatter',
  data: data,
  options: {
    scales: {
      x: {
        type: 'linear',
        position: 'bottom'
      }
    }
  }
};

接下来我们创建一个简单的散点图：

实例

const ctx = document. getElementById ( 'myChart' ) ;
const data = {
  datasets : [ {
    label : '散点图实例' ,
    data : [ {
      x : - 10 ,
      y :
    } , {
      x : ,
      y : 10
    } , {
      x : 10 ,
      y : 5
    } , {
      x : 0.5 ,
      y : 5.5
    } ] ,
    backgroundColor : 'rgb(255, 99, 132)'
  } ] ,
} ;
const config = {
  type : 'scatter' ,
  data : data ,
  options : {
    responsive : true , // 设置图表为响应式，根据屏幕窗口变化而变化
    maintainAspectRatio : false , // 保持图表原有比例
    scales : {
      x : {
        type : 'linear' ,
        position : 'bottom'
      }
    }
  }
} ;
const myChart = new Chart ( ctx , config ) ;

尝试一下 »

以上实例输出结果为：