ChartJS没有正确Map数据集值？

ecfdbz9o 于 2023-11-18 发布在 Chart.js

关注(0)|答案(1)|浏览(187)

我使用Flask并传递数据来渲染图表。为了调试代码，我在JS代码中生成了两个值数组。当我运行脚本时，我只得到1个数据点。基于此answer。

<script>
    const yVals = [0, 1, 2, 3, 4];
    const xVals = [0, 1, 2, 3, 4];
    var cv = document.getElementById('lineChart');
    var ctx = cv.getContext('2d');
    var chart = new Chart(ctx, {
        type: 'line',
        data: {
            
            datasets: [ 
            {
                label: "Spectrum",
                data: yVals.map((v, i) => ({x:xVals[i], y:v})),
                backgroundColor: "#33cc33",
                borderColor: "#33cc33",
                fill: false,
            },
            ]
        }
    });
</script>

字符串
结果：

在JS在线编译器中测试Map函数会呈现正确的输出：

看起来ChartJS并没有迭代整个过程.？

chart.js

来源：https://stackoverflow.com/questions/77456306/chartjs-not-mapping-dataset-value-correctly

1条答案

按热度按时间

zfycwa2u1#

你使用的是默认的x刻度，这里chart.js期望为x轴提供字符串作为标签。你提供的是数字。这些数字然后被用来指向标签数组中的索引，因为你没有使用它找不到任何东西。
最简单的两种解决方案是将x值设置为字符串或使用x轴的线性刻度：

X轴字符串：

const yVals = [0, 1, 2, 3, 4];
const xVals = [0, 1, 2, 3, 4];
var cv = document.getElementById('chartJSContainer');
var ctx = cv.getContext('2d');
var chart = new Chart(ctx, {
  type: 'line',
  data: {
    datasets: [{
      label: "Spectrum",
      data: yVals.map((v, i) => ({
        x: `${xVals[i]}`,
        y: v
      })),
      backgroundColor: "#33cc33",
      borderColor: "#33cc33",
      fill: false,
    }]
  }
});

个字符

线性X轴：

const yVals = [0, 1, 2, 3, 4];
const xVals = [0, 1, 2, 3, 4];
var cv = document.getElementById('chartJSContainer');
var ctx = cv.getContext('2d');
var chart = new Chart(ctx, {
  type: 'line',
  data: {
    datasets: [{
      label: "Spectrum",
      data: yVals.map((v, i) => ({
        x: xVals[i],
        y: v
      })),
      backgroundColor: "#33cc33",
      borderColor: "#33cc33",
      fill: false,
    }]
  },
  options: {
    scales: {
      x: {
        type: 'linear'
      }
    }
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/4.4.0/chart.umd.js"></script>

<body>
  <canvas id="chartJSContainer" width="600" height="400"></canvas>
</body>

的字符串

赞(0）回复(0）举报 2023-11-18

我来回答

ChartJS没有正确Map数据集值？

1条答案

相关问题

热门标签

最新问答