Chart.js 散点图数据不适用于来自 php 的数组常量

Question

我正在尝试使用 chart.js 制作散点图，其中数组作为 x 和 y 值。我在文件的前面使用 php 从 sql 查询中获取这些数组的内容。当我输入整数但不使用我的 const 数组时，它似乎有效。我使用了一种非常相似的方法来显示折线图，但我在散点图上遇到了问题。我对 JavaScript 也很陌生，所以这并没有让事情变得更容易。任何反馈将不胜感激。

    const e80_array = <?php echo json_encode($e80_result_array) ?>;
    const e110_array = <?php echo json_encode($e110_result_array) ?>;

    const e80_avg_array = <?php echo json_encode($e80_avg) ?>;
    const e110_avg_array = <?php echo json_encode($e110_avg) ?>;

    const e80_serials= <?php echo json_encode($e80_serial) ?>;
    const e110_serials = <?php echo json_encode($e110_serial) ?>;

    // console.log(e80_array);
    // console.log(e80_avg_array);
    // console.log(e80_serials);

    const e80data = {
    labels: e80_serials,
    datasets: [
        {
            label: 'E80',
            data: [
                {x: e80_array, y: e80_avg_array}
            ],
            backgroundColor: 'rgba(255, 0, 0, 0.2)',
            borderColor: 'rgb(255, 0, 0)',
            borderWidth: 1
        }
    ]};

    const e80config = {
    type: 'scatter',
    data: e80data,
    options: {
        hoverRadius: 15
    }
  };
 
  var e80Chart = new Chart(
    document.getElementById('e80Chart'),
    e80config
  );

我已经确保我的 sql 查询收集了正确的数据并将它们正确地组成数组。当我 console.log(e80_array) 和 console.log(e80_avg_array) 我进入网络浏览器控制台...

Array [ "172", "172" ]

和

Array [ "197.0", "193.0" ]

Answer 1

问题在于您提供

data

的方式。格式

data:[
    {x: [....], y: [....]}
]

不被 charts.js 识别。

如果你想显示

e80

和

e80_avg

关于

e80_serials

，你应该定义两个数据集：

    datasets: [
        {
            label: 'E80',
            data: e80_array,
            backgroundColor: 'rgba(255, 0, 0, 0.2)',
            borderColor: 'rgb(255, 0, 0)',
            borderWidth: 1
        },
        {
            label: 'E80_avg',
            data: e80_avg_array,
            backgroundColor: 'rgba(0, 0, 255, 0.2)',
            borderColor: 'rgb(0, 0, 255)',
        }
    ]}

jsFiddle。 在这种情况下，

line

图表类型会更容易。

如果你想绘制

e80_avg

相对于

e80

的图，你必须将每对数据作为一个项目：

[{x: 172, y: 190}, {x: 172, y:183}, ....]

    datasets: [
        {
            label: 'E80',
            data: e80_array.map((x, i)=>({x, y: e80_avg_array[i]})),
            backgroundColor: 'rgba(255, 0, 0, 0.2)',
            borderColor: 'rgb(255, 0, 0)',
            borderWidth: 1
        }
    ]

jsFiddle。 在这种情况下，您不需要标签。