javascript - 如何突出显示 ChartJS 中的特定数据点，其中我的数据来自 json 数组？

Question

//这里我从 phpfile 中获取另一个 json 编码数据

       $(document).ready(function () {

        showGraph();
    });


    function showGraph()
    {
        {

            $.post("phpfile.php",
            function (data)
            {
                console.log(data);
                 var name = [];
                var marks = [];
                var height=[];

//这里因为我无法分别编码两个 json 数组，所以我将其声明为一个变量，然后使用它

   var jsonfile =[{"height":"85","st_name":"Name1"},{"height":"100","st_name":"Name3"},{"height":"92","st_name":"Name4"},{"height":"104","st_name":"Name5"},{"height":"91","st_name":"Name2"},{"height":"99","st_name":"Name6"},{"height":"140","st_name":"AI346"},{"height":"139","st_name":"abc"},{"height":"141","st_name":"def"},{"height":"140","st_name":"ghi"},{"height":"144","st_name":"jkl"},{"height":"130","st_name":"lmn"},{"height":"142","st_name":"opq"},{"height":"132","st_name":"rst"},{"height":"135","st_name":"xyz"},{"height":"135","st_name":"asdfsf"}];

//这里我正在从phpfile(第一个Json数组)读取数据

                    for (var i in data) {
                    name.push(data[i].st_name);
                    marks.push(data[i].height);


                }

//这里我尝试从第二个 json 访问数据

             for (var i=0;i<jsonfile.length;i++){
                    if(jsonfile[i].height==100)
                        { height.push(jsonfile[i].height)}
                }

//我的图形函数，当我这样做时，我得到了第二个 json(高度变量)的单点，但我需要在某种条件下突出显示特定点...我不明白如何做到这一点。

           var chartdata = {
                    labels: name,


                    datasets: [
                        {
                            label: 'height',
                            fill:false,
                            lineTension:0.5,
                            backgroundColor: '#5B2C6F',
                            borderColor: '#5B2C6F',
                            pointHoverBackgroundColor: '#5B2C6F',
                            pointHoverBorderColor: '#5B2C6F',
                            data: marks

                            //data:height
                        },

                        {
                            label: 'weight',
                            fill:false,
                            lineTension:0.1,
                            backgroundColor: '#C0392B',
                            borderColor: '#C0392B',
                            pointHoverBackgroundColor: '#C0392B',
                            pointHoverBorderColor: '#C0392B',
                            data:height,
                            //data:height
                        }









                ]

                };

                var graphTarget = $("#graphCanvas");

                var lineGraph = new Chart(graphTarget, {
                    type: 'line',
                    data: chartdata,
                    options :{ 
                       scales:{
                         xAxes: [{
                                 display: false //this will remove all the x-axis grid lines
                                }]
                    }
                }


                });
            });
        }
    }
    </script>

Answer 1

我会尽力改进这一点。

var data =[{"height":"85","st_name":"Name1","color":"rgba(85, 85, 255, 255)"},{"height":"100","st_name":"Name3","color":"rgba(255, 0, 0, 2)"},{"height":"92","st_name":"Name4","color":"rgba(85, 85, 255, 255)"},{"height":"104","st_name":"Name5","color":"rgba(85, 85, 255, 255)"}];


    var height = [];
    var label = [];
    var color = [];

    for(i = 0; i<data.length; i++){
        height.push(data[i]['height']);
        label.push(data[i]['st_name']);
        color.push(data[i]['color']);
    }

    var ctx = document.getElementById('myLine').getContext('2d');

    var myLineChart = new Chart(ctx, {
        type: 'line',
        data: {
            labels: label,
            datasets: [{
                data: height,
                pointBorderColor: color,
            }]  
        }     
    });