V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
TravisMtg
V2EX  ›  前端开发

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

  •  
  •   TravisMtg · 224 天前 · 984 次点击
    这是一个创建于 224 天前的主题,其中的信息可能已经有所发展或是发生改变。

    https://www.newsminimalist.com/

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

    还是得懂点 canvas 自己画?

    2 条回复    2024-04-25 11:23:36 +08:00
    llwxi
        1
    llwxi  
       224 天前
    [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
        2
    TravisMtg  
    OP
       224 天前
    @llwxi nice
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   3639 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 21ms · UTC 04:24 · PVG 12:24 · LAX 20:24 · JFK 23:24
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.