Chart.js

Chart.js ni makutano wa JavaScript wa kufikia bila malipo, kwa kuzengera chati za kuzingatia HTML.

Hii ni moja ya makutano ya JavaScript kwa sababu ya uharibifu zaidi, na ina aina za chati zilizobaki:

  • Chati cha kipendena (Scatter Plot)
  • Chati cha kipendena (Line Chart)
  • Chati cha kipendena (Bar Chart)
  • Chati cha kipendena (Pie Chart)
  • Chati cha kipendena (Donut Chart)
  • Chati cha kipendena (Bubble Chart)
  • 面积图（Area Chart）
  • 雷达图（Radar Chart）
  • 混合图（Mixed Chart）

如何使用 Chart.js？

Chart.js 很容易使用。

首先，添加指向提供 CDN（内容分发网络）的链接：

然后，将 添加到要绘制图表的位置：

canvas 元素必须有一个唯一的 id。

这是这样！

典型的散点图语法：

const myChart = new Chart("myChart", {
  type: "scatter",
  data: {},
  options: {}
});

典型的折线图语法：

const myChart = new Chart("myChart", {
  
  data: {},
  options: {}
});

典型的条形图语法：

const myChart = new Chart("myChart", {
  type: "bar",
  data: {},
  options: {}
});

散点图

房价 vs. 面积

源代码

const xyValues = [
  {x:50, y:7},
  {x:60, y:8},
  {x:70, y:8},
  {x:80, y:9},
  {x:90, y:9},
  {x:100, y:9},
  {x:110, y:10},
  {x:120, y:11},
  {x:130, y:14},
  {x:140, y:14},
  {x:150, y:15}
];
new Chart("myChart", {
  type: "scatter",
  data: {
    datasets: [{
      pointRadius: 4,
      pointBackgroundColor: "rgba(0,0,255,1)",
      data: xyValues
    }]
  ,
  options:{...}
});

Jifunze tena

折线图

房价 vs. 面积

源代码

const xValues = [50,60,70,80,90,100,110,120,130,140,150];
const yValues = [7,8,8,9,9,9,10,11,14,14,15];
new Chart("myChart", {
  
  data: {
    labels: xValues,
    datasets: [{
      backgroundColor:"rgba(0,0,255,1.0)",
      borderColor: "rgba(0,0,255,0.1)",
      data: yValues
    }]
  ,
  options:{...}
});

Jifunze tena

如果将 borderColor 设置为 0，则可以散点图绘制折线图：

borderColor: "rgba(0,0,0,0)",

Jifunze tena

多行

源代码

const xValues = [100,200,300,400,500,600,700,800,900,1000];
new Chart("myChart", {
  
  data: {
    labels: xValues,
    datasets: [{
      data: [860,1140,1060,1060,1070,1110,1330,2210,7830,2478],
      borderColor: "red",
      fill: false
    },{
      data: [1600,1700,1700,1900,2000,2700,4000,5000,6000,7000],
      borderColor: "green",
      fill: false
    },{
      data: [300,700,2000,5000,6000,4000,2000,1000,200,100],
      borderColor: "blue",
      fill: false
    }]
  ,
  options: {
    legend: {display: false}
  }
});

Jifunze tena

线性图

源代码

const xValues = [];
const yValues = [];
generateData("x * 2 + 7", 0, 10, 0.5);
new Chart("myChart", {
  
  data: {
    labels: xValues,
    datasets: [{
      
      pointRadius: 1,
      borderColor: "rgba(255,0,0,0.5)",
      data: yValues
    }]
  ,
  options: {...}
});
function generateData(value, i1, i2, step = 1) {
  for (let x = i1; x <= i2; x += step) {
    yValues.push(eval(value));
    xValues.push(x);
  }
}

Jifunze tena

函数图

与线性图相同。只需更改 generateData 参数：

generateData("Math.sin(x)", 0, 10, 0.5);

Jifunze tena

条形图

源代码

var xValues = ["意大利", "法国", "西班牙", "美国", "阿根廷"];
var yValues = [55, 49, 44, 24, 15];
var barColors = ["red", "green","blue","orange","brown"];
new Chart("myChart", {
  type: "bar",
  data: {
    labels: xValues,
    datasets: [{
      backgroundColor: barColors,
      data: yValues
    }]
  ,
  options: {...}
});

Jifunze tena

只给一条上色：

var barColors = ["blue"];

Jifunze tena

所有条只有一种颜色：

var barColors ="red";

Jifunze tena

mabaya ya rangi tofauti zaidi:}}

var barColors = [
  "rgba(0,0,255,1.0)",
  "rgba(0,0,255,0.8)",
  "rgba(0,0,255,0.6)",
  "rgba(0,0,255,0.4)",
  "rgba(0,0,255,0.2)",
];

Jifunze tena

bar cha umbo wa horiza

Kutumia type ya "bar" Inafikia "horizontalBar":

type: "horizontalBar",

Jifunze tena

tukio la kichakacha

mifano

new Chart("myChart", {
  type: "pie",
  data: {
    labels: xValues,
    datasets: [{
      backgroundColor: barColors,
      data: yValues
    }]
  ,
  options: {
    title: {
      display: true,
      text: "Uchafuzi wa vina vya vinu vya jua kwenye nchi yote"
    }
  }
});

Jifunze tena

Tukio la kichakacha

Kutumia type ya "pie" Inafikia "doughnut":

type: "doughnut";

Jifunze tena