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 >}}