如何使用react从charts-jsMap一个图表数组

fiei3ece  于 11个月前  发布在  Chart.js
关注(0)|答案(3)|浏览(108)

bounty将在5天后过期。回答此问题可获得+100声望奖励。LOTUSMS正在寻找规范答案

我已经使用了一个Map功能一百万次,但这是逃避我。

  • 我有一个 accordion ,Map出图表标题,所以我可以选择我想要的-作品
  • 一旦我选择了一个图表,它显示在查看器网络上,它-工程
  • 如果我想保存这个到我的pinnedcharts集合,我点击大头针,它会将其添加到pinnedcharts数组-工作-排序

问题:
如果你检查控制台,pinnedcharts数组实际上包含不同的图表(取决于你固定的图表数量)。但是在屏幕上,所有的图表都是相同的(当前)图表。
您必须查看下面链接的codepen才能更好地理解这一点,但这里是Map

{pinnedcharts.map((chart, index) => {
    return (
        <Grid item md={6} key={index}>
            <Box>
                <CardContent>
                    <Box>
                        <Grid
                            container
                            spacing={2}
                            direction="row"
                            justifyContent="space-between"
                            alignItems="center"
                          >
                            <Grid item xs>
                              <Typography variant="h5">
                                {chart.title}
                              </Typography>
                            </Grid>
                            <Grid item xs={1}>
                              <IconButton
                                color="primary"
                                size="small"
                                onClick={handlePinnedPin}
                              >
                                {pinned ? <LuPin /> : <LuPinOff />}
                              </IconButton>
                            </Grid>
                        </Grid>
                        <Line options={options} data={wbrdata} /> //{chart.wbrdata} doesn't work.
                    </Box>
                </CardContent>
            </Box>
        </Grid>
    );
})}

字符集
{chart.wbrdata}上的错误与无法Map它有关,这是有道理的,因为wbrdata是一个对象,而不是数组,但它在查看器上工作,它知道如何通过chartsjs的构造来选择wbrdata中的数据集
如果您看到标题和ID已正确Map。而不是数据集
我很感激任何帮助
CODEPEN

wooyq4lh

wooyq4lh1#

chart直接传递给pinnedCharts.map中的Line组件data prop就可以了。
在快速查看您提供的codesandbox之后,chart对象上的wbrdata属性不存在的原因是因为它从未作为新属性添加到固定的图表中。
相反,它作为一个完整的图表对象附加到固定图表列表中,当您MappinnedCharts数组时可以访问该列表。
希望这对你有帮助。

vvppvyoh

vvppvyoh2#

Here is fixed version
当你需要从map中使用chart变量时,你传递了wbrdata

<Grid container spacing={2}>
  {pinnedcharts.map((chart, index) => 
    <Grid item md={6} key={index}>
      <Box>
        <CardContent>
          <Box>
            <Grid
              container
              spacing={2}
              direction="row"
              justifyContent="space-between"
              alignItems="center"
            >
              <Grid item xs>
                <Typography variant="h5">
                  {chart.title}
                </Typography>
              </Grid>
              <Grid item xs={1}>
                <IconButton
                  color="primary"
                  size="small"
                  onClick={handlePinnedPin}
                >
                  {pinned ? <LuPin /> : <LuPinOff />}
                </IconButton>
              </Grid>
            </Grid>
            <Line options={options} data={chart} />
            {/* use chart instead of wbrdata 👆 */}
          </Box>
        </CardContent>
      </Box>
    </Grid>
  )}
</Grid>

字符集

ugmeyewa

ugmeyewa3#

看起来你遇到了一个问题,当你将一个新的图表固定到pinnedcharts数组时,图表的状态没有正确更新。
这个问题可能是由于React中Chart.js的Line组件没有为每个单独的图表接收正确的数据属性,或者应用程序中的状态管理可能有问题。

const MyChartsComponent = () => {
  const [pinnedcharts, setPinnedCharts] = useState([]);

  // This function should handle the logic to pin a chart
  // It should update the state with the new list of pinned charts
  const handlePinnedPin = (chartToPin) => {
    // Logic to update pinnedcharts array
    // For example, if you want to toggle the pin status
    setPinnedCharts(prevCharts => {
      if (prevCharts.includes(chartToPin)) {
        return prevCharts.filter(chart => chart !== chartToPin);
      } else {
        return [...prevCharts, chartToPin];
      }
    });
  };

  return (
    // Your return value 
  );
};

// Helper function to determine if a chart is pinned
const isChartPinned = (chart) => {
  // Your logic
};

export default MyChartsComponent;

字符集

希望这可以帮助你!!

相关问题