Question

我正试图将点对象数组发送到Chartjs的数据集中进行散点图绘制。该数组在控制台中看起来不错，但我认为它不会传递到“ scatterChartData”的变量声明中。

这是Chrome日志中显示的数组的第一部分：

0 ： {x：“ 6”，y：“ 0.95”} 1个： {x：“ 5.77”，y：“ 0.97”} 2 ： {x：“ 6.32”，y：“ 0.98”} 3 ： {x：“ 5.85”，y：“ 0.97”} 4 ： {x：“ 5.94”，y：“ 0.92”} 5 ： {x：“ 6.67”，y：“ 1”} 6 ： {x：“ 6.32”，y：“ 0.93”} 7 ： {x：“ 5.86”，y：“ 1.03”} 8 ： {x：“ 5.86”，y：“ 0.98”} 9 ： {x：“ 6.32”，y：“ 1”}

第二组数据的键入数据工作正常，但是第一组数据的数组似乎为空或格式错误。

    <script>
    var dataset1;
    var xData = [];
    var yData = [];
    var result = "";

    function getAllData(response) {
        result = response;
    }

    $.ajax({
        type: "GET",
        url: "dataindividual.php",
        datatype: "json",
        success: getAllData,
    });

    function viewData() {
        drawGraph();
    }

    function drawGraph() {
        var xVal = "happroach";
        for (var i in result) {
            //Put x,y variable names here matching from data.php
            if (xVal == "happroach") {
                xData.push(result[i].happroach)
            };
            if (xVal == "hexit") {
                xData.push(result[i].hexit)
            };
            if (xVal == "hclearance") {
                xData.push(result[i].hclearance)
            };
            yData.push(result[i].hratio);
        }

        const xPlot = xData;
        const yPlot = yData;

        var newdata = xPlot.map((x, i) => {
            return {
                x: x,
                y: yPlot[i]
            };
        });
        console.log(newdata);

        var color = Chart.helpers.color;
        var scatterChartData = {
            datasets: [{
                label: 'My First dataset',
                xAxisID: 'x-axis-1',
                yAxisID: 'y-axis-1',
                borderColor: window.chartColors.red,
                backgroundColor: color(window.chartColors.red).alpha(0.2).rgbString(),
                data: [{
                    newdata,
                }]
            }, {
                label: 'My Second dataset',
                xAxisID: 'x-axis-1',
                yAxisID: 'y-axis-2',
                borderColor: window.chartColors.blue,
                backgroundColor: color(window.chartColors.blue).alpha(0.2).rgbString(),
                data: [{
                    x: "5",
                    y: "3",
                }, {
                    x: "5.2",
                    y: "2",
                }]
            }]
        };

        var ctx = document.getElementById('canvas').getContext('2d');
        window.myScatter = Chart.Scatter(ctx, {
            data: scatterChartData,
            options: {
                responsive: true,
                hoverMode: 'nearest',
                intersect: true,
                title: {
                    display: true,
                    text: 'Chart.js Scatter Chart - Multi Axis'
                },
                scales: {
                    xAxes: [{
                        position: 'bottom',
                        gridLines: {
                            zeroLineColor: 'rgba(0,0,0,1)'
                        }
                    }],
                    yAxes: [{
                        type: 'linear', // only linear but allow scale type registration. This allows extensions to exist solely for log scale for instance
                        display: true,
                        position: 'left',
                        id: 'y-axis-1',
                    }, {
                        type: 'linear', // only linear but allow scale type registration. This allows extensions to exist solely for log scale for instance
                        display: true,
                        position: 'right',
                        reverse: true,
                        id: 'y-axis-2',

                        // grid line settings
                        gridLines: {
                            drawOnChartArea: false, // only want the grid lines for one axis to show up
                        },
                    }],
                }
            }
        });
    }
</script>

Answer 1

这是一个快速修复。数组变量周围没有方括号。数据：[{ 新数据， }]

应该是数据：newdata，

Chartjs的scatterChartData声明中不接受数据集

1 个答案: