Chart-js 示例
chart 1
Chart 2
chart 3
chart 4
chart 5
chart 6
KaTex
% KaTeX inline notation Inline notation: \(\varphi = \dfrac{1+\sqrt5}{2}= 1.6180339887…\)
\[\begin{aligned} \nabla \times \vec{\mathbf{B}} - \frac{1}{c} \frac{\partial \vec{\mathbf{E}}}{\partial t} &= \frac{4\pi}{c} \vec{\mathbf{j}} \\ \nabla \cdot \vec{\mathbf{E}} &= 4\pi \rho \\ \nabla \times \vec{\mathbf{E}} + \frac{1}{c} \frac{\partial \vec{\mathbf{B}}}{\partial t} &= \vec{\mathbf{0}} \\ \nabla \cdot \vec{\mathbf{B}} &= 0 \end{aligned}\]锵锵锵！今年的第二篇季度总结来了！不知不觉地就写了很多字，感觉其中大半部分都是在吐槽我的打工经历……以及吐槽一些片子。这几个月总算把旷野之息通关啦，但是游戏进度只有百分之二十几，啊，似乎漏了很多任务没做……但是我已经沉迷于王国之泪了！！这几个月发生了不少事情，也消耗了很多精力。
$$ \LaTeX $$\(\textcolor{#228B22}{F=ma}\)
chart 18
chart 17
chart 16
chart 15
chart 14
chart 13
chart 12
chart 11
chart 10
chart 9
chart 8
修改 Chart-js 显示大小
在 hugo 博客中引用 chartjs 的简码如下， 修改 css 样式，使其图表大小正常 将修改好的代码返回保存在 custom.css 中
/* custom.css */
.chart-container {
position: relative;
height: 400px;
width: 100%;
}
canvas {
display: block;
max-width: 100%;
height: 400px !important;
width: 100% !important;
}
修改说明：
- 为图表容器设置了固定高度400px和100%宽度
- 为canvas元素设置了最大宽度100%和固定高度400px
- 使用!important确保样式优先级覆盖Chart.js的默认样式
- 移除了原代码中的
responsive: false选项（建议在简码中改为responsive: true）
建议同时修改简码中的选项：
{{\< chart >}}
type: "line",
data: {
// ... 数据保持不变
},
options: {
responsive: true, // 改为true以启用响应式
maintainAspectRatio: false, // 添加此选项
// ... 其他选项保持不变
}
{{\< /chart >}}