react-chartjs相关内容

如何在Chartjs雷达中删除网格线和网格标签?

使用chartjs 2型雷达,如何删除网格线和网格线标签以使雷达图更类似于下面所示的所需雷达图? 当前: 所需: 推荐答案 要删除/减少网格线,可以将ticks的maxTicksLimit属性设置为一个数字(网格线的数量-约),如下所示: scale: { ticks: { maxTicksLimit: 3 } } 奖励:如果您希望删除所有 ..
发布时间:2022-02-24 18:55:51 前端开发

React-Chart.js 图例 onClick 函数

我正在使用 Chart.js 的反应包装器处理具有多个堆叠数据集的条形图(https://github.com/reactchartjs/react-chartjs-2). 我一直试图让图表一次只显示一个数据集,但我无法找到正确的函数. 我希望图表以隐藏的所有数据集开始(这部分很简单),当您单击图例时,我希望图表仅显示选定的数据集.因此,当您单击一个然后另一个时,我希望隐藏第一个. ..
发布时间:2022-01-22 15:56:58 前端开发

ChartJS:如何设置固定 Y 轴最大值和最小值

我有一个折线图,我正在尝试设置 固定 最大值和最小值.我已经尝试过在 SO 上找到的其他建议,但它仍然不起作用.我的图表会根据传入的数据不断重新设置最大值和最小值. 这是我传递给折线图的当前选项: var 选项 = {响应式:真实,动画:假}; 我也尝试了这些设置: var 选项 = {秤:{动画:假,y轴:[{显示:真,滴答声:{建议最小值:-1,建议最大:1}}]}}; 知道我做 ..
发布时间:2022-01-22 15:40:52 其他开发

Chartjs 2 缩放大量数据点

我正在尝试使用 24 小时数据(每 30 秒收集一次)呈现折线图.我无法从 docs 中弄清楚如何获得它很好地扩展. 文档说: 在构建它的刻度时,它会根据刻度的大小自动计算最舒适的单位. 但我无法让我的折线图“舒适"地缩放.我不确定它们是什么意思,但我得到的数据点太多,无法很好地渲染.所以我想我正在寻找一种删除数据点的方法(使用 chartjs,而不是手动滚动). 我正在用 ..
发布时间:2022-01-22 15:35:23 其他开发

如何在 ChartJs 中显示数据值或索引标签(最新版本)

如何在 ChartJs(最新版本)中显示数据值或索引标签,如下图所示: 我正在使用 ChartJs 在我的 React 项目中显示图表.一切正常,除了这个. 我在 stackoverflow (https://stackoverflow.com/a/31632707) 中找到了答案,但它使用的是旧的chartjs 的版本,并且不适用于我正在使用的版本. 我的 ChartJs 代码 ..
发布时间:2022-01-22 15:32:54 前端开发

ReactJS如何仅在向下滚动并到达页面时才呈现组件?

我有一个反应组件 Data ,其中包括几个图表组件; BarChart LineChart ... etc. Data 组件开始呈现时,要花一些时间才能从API接收每个图表所需的数据,然后它开始响应并呈现所有图表组件. 我需要的是,当我向下滚动并到达页面时,开始仅仅显示每个图表. 有什么方法可以帮助我实现这一目标吗? 解决方案 您至少有三种选择方法: 跟踪组件是否在 ..
发布时间:2021-05-19 19:28:15 前端开发

使用React JS计算字符串数组中的重复项

以下是我实现的代码,用于在React应用程序中使用Chart js创建条形图.它在此处创建一个条形图,其中所有数据都位于一个数组中.但是,我只想更改此代码,以便在x轴(目标,y轴)中提供输出.因为它有许多重复的目的地,所以该目的地的出现次数不计其数.我搜索了此方法,但找不到正确的解决方案.谁能帮我做到这一点? const dataArrayY4 = [];res.data.map(item = ..
发布时间:2021-04-21 20:32:51 其他开发

图表Js折线图,单击时带有其图例文本的完整信息

我正在使用chart.js 2.9.3.我在选项中使用了 onClick 处理程序以及 getElementAtEvent 来实现我想要的功能但是我得到了 empty 数组,该事件没有有关被单击区域的信息.单击每个点都可以,但是单击整条线的区域并不能给我太多信息. 这是图表的代码段. var chart_canvas = document.getElementById("myChart" ..

如何从水平条形图js的两面制作标签

我想像这样在两侧制作双水平条的侧面标签:图片1 ,图片2 有人可以帮我idk怎么做吗,我是React和Chartjs的新手 此帖子的下一篇:如何制作多个水平条形图 这是我编写的代码: 此数据: 图表数据 export const dataPasienKeluarMasuk = {类型:“酒吧",标签: [[0,1,2,3,4],//预期输出0-4[5,6,7,8, ..
发布时间:2021-04-21 20:30:27 其他开发

如何制作多个水平条形图

我想在以下反应中使用chartjs制作水平条形图:我想制作图表 ,但我最终还是这样做我制作的图表 可以对我有所帮助,我是react和chartjs的新手 这是本文的延续:如何从水平条形图js的两面制作标签 这是我的代码: 此数据: export const dataPasienKeluarMasuk = { 类型:“ bar”, 标签:[ [0,1,2,3, 4 ..
发布时间:2020-10-01 02:13:35 其他开发

如何在chartjs2中绘制具有不同颜色的一条线?

我需要画一张看起来像图片上的图表.我该如何使用chartjs2?不幸的是,我找不到任何示例来展示如何实现它. 解决方案 首先将您的line图表转换为scatter图表.然后使用插件核心在画布上直接绘制线条API .该API提供了一系列可用于执行自定义代码的挂钩. 在下面的代码片段中,我使用beforeDraw钩子在数据点之间绘制不同颜色的连接线. const values = ..
发布时间:2020-07-05 06:11:09 前端开发

材质表嵌套行在reactjs中展开/折叠

我有一个集成了材料表的 react-chartjs ,请在以下链接中找到它: https://codesandbox.io/s/elastic-brook -okkce?file =/src/Dashboard.jsx 您可能会看到,单击任何栏都会填充一个表格. 该表中的值是从后端响应中获取的(这里我没有写同样的代码,但是它在我的PC上正常工作).该材料表接受“数据"属性,该属性具有分配给该 ..

ChartJS堆积条形图的透明间隙

我已经花了几天的时间思考这个问题,开始认为这是chartJS包中的错误?当我设置堆积的条形图时,即使使用非常简单的选项配置,我也倾向于在条形数据本身之间获得非常细小的透明间隙.条形图中的数据越多,它变得越明显.我已经完全将其与我的代码隔离了(我们正在使用React和react-chartjs-2,但是我=我已经使用最新版本的Vanilla ChartJS重新创建了它.) 在这里的示例中,我已 ..
发布时间:2020-07-05 06:10:02 前端开发

在react-chartjs2中更改工具提示方向

我已经实现了react-chartjs2 https://www.npmjs.com/包/react-chartjs-2 在我的应用中我已经成功实现了它,但是在悬停图表时我需要更改工具提示的方向.目前看起来像这样 但是我希望我的工具提示看起来像这样 我该如何实现 我的图表和图表选项代码 const barChartOptions = { tooltips: { ..
发布时间:2020-07-05 06:09:58 前端开发