基础-绘制一个条形图 #

// src/hello/index.js

export function foo() {
  return 'foo';
}

// index.js

export function foo() {
  return 'foo'; // 让调用者知道这是一个 foo 函数
}

// ch03/barchart/canvas/index.js

const data = [
  { name: "questions", value: 17 },
  { name: "schools", value: 25 },
  { name: "philosophers", value: 35 },

];

const chartWidth = 480; // 条形图的宽度
const chartHeight = 300; // 条形图的高度
const margin = 15; // 条形图的外边距

const containerWidth = chartWidth + margin * 2; // 容器的宽度
const containerHeight = chartHeight + margin * 2; // 容器的高度

// ch03/barchart/canvas/index.js

const names = Array.from(data, (d) => d.name);
const values = Array.from(data, (d) => d.value);
const indices = Array.from(data, (_, i) => i);

// ch03/barchart/canvas/index.js

// 计算每一个条左下顶点的横坐标
// 位置和在数组里面的 index 有关
const step = chartWidth / names.length;
const barWidth = step * 0.8;
const xs = Array.from(indices, (i) => i * step);

// 计算每一个条左下顶点的纵坐标
// 因为所有条底部都是对齐的，所以就是图表的高度
const y = chartHeight;

// ch03/barchart/canvas/index.js

// 获得每一个条的高度
// 条的高度应该和 value 线性相关的
const vmax = Math.max(...values);
const barHeights = Array.from(values, (v) => chartHeight * (v / vmax));

// 获得每一个条的颜色
const nameColor = {
  questions: "#5B8FF9",
  philosophers: "#61DDAA",
  schools: "#65789B",
};

const colors = Array.from(names, (name) => nameColor[name]);

// ch03/canvas-demo/draw/index.js

// 获得 canvas 容器元素
const canvas = document.getElementById("canvas");

// 设置 canvas 的样式宽高
// 样式宽高决定了 canvas 在画布上呈现的大小
canvas.style.width = 400 + "px";
canvas.style.height = 200 + "px";

// 设置 canvas 画布宽高
// 这个宽高是可以绘制区域的大小
// 样式宽高是默认等于画布宽高的
canvas.width = 400;
canvas.height = 200;

// 获得绘制的上下文
// 之后的 API 都是通过调用 context
const context = canvas.getContext("2d");

// ch03/canvas-demo/draw/index.js

// 绘制一个矩形
context.fillStyle = "red"; // 设置填充颜色
context.strokeStyle = "yellow"; // 设置边框的颜色
context.lineWidth = 10; // 设置边框的宽度
context.strokeRect(0, 0, 100, 100); // 绘制边框
context.fillRect(5, 5, 95, 95); // 绘制填充颜色

// 绘制一段文字
context.fillStyle = "black"; // 设置文字的颜色
context.font = "25px PingFangSC-Regular, sans-serif"; // 设置文字的大小和字体
context.fillText("hello world", 150, 100); // 绘制文字

// ch03/canvas-demo/transform/index.js

/*
 * 这里需要补上获得绘制上下文并且设置维度信息的内容。
 */
context.fillStyle = "red";
context.fillRect(0, 0, 50, 50);
context.fillStyle = "red";
context.fillRect(0, 0, 50, 50);

// 进行一系列坐标变换
context.fillStyle = "blue";
context.translate(50, 50);
context.rotate(-Math.PI / 6);
context.scale(2, 3);
context.fillRect(0, 0, 50, 50);

// ch03/barchart/canvas/index.js

const canvas = document.getElementById("container-canvas");
canvas.style.width = containerWidth + "px";
canvas.style.height = containerHeight + "px";

// 下面把画布宽高设置为样式宽高的两倍主要是为了解决模糊问题
// 这个地方就不详细展开了，感兴趣的可以自行查阅
canvas.width = containerWidth * 2;
canvas.height = containerHeight * 2;

const context = canvas.getContext("2d");
context.scale(2, 2); // 抵消将画布宽高设置为样式宽高两倍的影响

context.translate(margin, margin); // 将坐标原点移动到绘制图表的区域

for (const index of indices) {
  // 将需要绘制的属性取出来
  const color = colors[index];
  const x = xs[index];
  const barHeight = barHeights[index];
  const value = values[index];
  // 绘制条
  context.fillStyle = color;
  context.fillRect(x, y - barHeight, barWidth, barHeight);

  // 绘制值
  context.textAlign = "center";
  context.textBaseline = "middle";
  context.fillStyle = "white";
  context.font = "25px PingFangSC-Regular, sans-serif";
  context.fillText(value, x + barWidth / 2, y - barHeight / 2);
}

// ch03/barchart/svg/index.html

/*
 * 这里要补上数据处理的内容
 */

// 直接使用 document.createElement 是不行的
function createSVGElement(type) {
  return document.createElementNS("http://www.w3.org/2000/svg", type);
}

const svg = document.getElementById("container-svg");
// 设置 svg 的坐标原点和大小
svg.setAttribute("width", containerWidth);
svg.setAttribute("height", containerHeight);
svg.setAttribute("viewBox", [0, 0, containerWidth, containerHeight]);

// 创建一个 g 元素用于平移
const g = createSVGElement("g");
g.setAttribute("transform", `translate(${margin}, ${margin})`);
svg.appendChild(g);

for (const index of indices) {
  // 取得对应的属性
  const color = colors[index];
  const x = xs[index];
  const barHeight = barHeights[index];
  const value = values[index];

  // 绘制条
  const rect = createSVGElement("rect");
  rect.setAttribute("x", x);
  rect.setAttribute("y", y - barHeight);
  rect.setAttribute("fill", color);
  rect.setAttribute("width", barWidth);
  rect.setAttribute("height", barHeight);
  g.appendChild(rect);

  // 绘制值
  const text = createSVGElement("text");
  text.textContent = value;
  text.setAttribute("text-anchor", "middle");
  text.setAttribute("fill", "white");
  text.setAttribute("font-family", "PingFangSC-Regular, sans-serif");
  text.setAttribute('font-size', 25);
  text.setAttribute("alignment-baseline", "middle");
  text.setAttribute("x", x + barWidth / 2);
  text.setAttribute("y", y - barHeight / 2);

  g.appendChild(text);
}