问问这个网站中的图表怎么做？

This topic created in 776 days ago, the information mentioned may be changed or developed.

https://www.newsminimalist.com/

这个可以拖动滑动条，和上方柱形图互动，这种图表有什么现成的开源实现可用吗？

还是得懂点 canvas 自己画？

2 replies • 2024-04-25 11:23:36 +08:00

llwxi

Apr 24, 2024

[rc-slider]( https://slider-react-component.vercel.app/demo/range)
[chart.js]( https://www.chartjs.org/docs/latest/samples/bar/floating.html)

```js
{
data: {
labels: n,
datasets: [{
label: "Articles",
data: l,
backgroundColor: "rgba(0, 123, 255, 0.2)",
borderColor: "rgba(0, 123, 255, 0.6)",
borderWidth: 1
}, {
label: "Filtered articles",
data: c,
backgroundColor: "rgba(0, 123, 255, 1)",
borderColor: "rgba(0, 123, 255, 1)",
borderWidth: 0
}]
},
options: {
animation: !1,
maintainAspectRatio: !1,
plugins: {
legend: {
onClick: ()=>{}
,
align: "center",
position: "top",
labels: {
boxHeight: 6,
font: {
size: 14
}
}
}
},
scales: {
y: {
title: {
text: "Number of articles",
color: "#64748b",
font: {
size: 14
}
},
border: {},
ticks: {
beginAtZero: !0,
display: !0,
autoSkip: !0,
maxTicksLimit: 10,
color: "#64748b",
stepSize: 1
},
grid: {
drawBorder: !1,
drawOnChartArea: !1
},
max: "small" === a ? 6 : void 0
},
x: {
stacked: !0,
title: {
display: !1,
text: "News significance",
color: "#64748b",
font: {
size: 14
}
},
ticks: {
align: "center",
maxTicksLimit: 11,
color: "#64748b"
},
grid: {
offset: !1,
drawBorder: !1,
drawTicks: !0,
drawOnChartArea: !1
}
}
}
}
}

```

TravisMtg

Apr 25, 2024

@llwxi nice