如何突出显示 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(1st Json array)读取数据

                    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

                        },

    </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)"}];&nbsp; &nbsp; var height = [];&nbsp; &nbsp; var label = [];&nbsp; &nbsp; var color = [];&nbsp; &nbsp; for(i = 0; i<data.length; i++){&nbsp; &nbsp; &nbsp; &nbsp; height.push(data[i]['height']);&nbsp; &nbsp; &nbsp; &nbsp; label.push(data[i]['st_name']);&nbsp; &nbsp; &nbsp; &nbsp; color.push(data[i]['color']);&nbsp; &nbsp; }&nbsp; &nbsp; var ctx = document.getElementById('myLine').getContext('2d');&nbsp; &nbsp; var myLineChart = new Chart(ctx, {&nbsp; &nbsp; &nbsp; &nbsp; type: 'line',&nbsp; &nbsp; &nbsp; &nbsp; data: {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; labels: label,&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; datasets: [{&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; data: height,&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; pointBorderColor: color,&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }]&nbsp;&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp;&nbsp; &nbsp; });