Question

我有MySQL表，该数据是从数据库中获取的并绘制在图表上。在这里，我使用的是顶点图表，是从数据库中获取时间戳，数据和标签值。标签值是指向数据的P，R，N。数据和时间戳绘制在顶点折线图上，我面临的问题是，将鼠标悬停在上面时如何显示每个数据的数据标签。

    <?phprequire("db/opendb.php");



 $time=array();
    $data=array();
    $label=array();


$query="SELECT label.label,data.timestamp,data.value from label
JOIN data
on label.id=data.label
where data.datainfo= '".$dataid."'";
//$query2= "select * from wavedata";
$result=$conn->query($query);
foreach ($result as $value) {
    array_push($time,$value['timestamp']);
    array_push($data,$value['value']);
    array_push($label,$value['label']);


}

<script type="text/javascript">
            var js_dateTime = [<?php echo '"'.implode('","', $time).'"' ?>];

            var js_data = [<?php echo '"'.implode('","', $data).'"' ?>];
            var js_label = [<?php echo '"'.implode('","', $label).'"' ?>];



            newData(js_data,js_dateTime,js_label);
            //newGraphData(js_data2,js_dateTimeNextGraph);



[var time = \[\];
       var data=\[\];
       var label=\[\];][1]

function newData(ndata1,ndateTime,ndatalabel) {
      //alert("data function called");
            data = ndata1.slice();

            time=ndateTime.slice();
            label=ndatalabel.slice();


            document.getElementById('chart1').innerHTML = '';
            loadGraph();

        }



function loadGraph(){

                  //alert("hi");
            var options = {

                chart: {
                height: 300,
                width: 900,
                type: 'line',
                zoom: {
                enabled: false

                },
              },
               dataLabels: {
                enabled: false


              },
             //colors: [ '#00618B'],
              stroke: {
                width: [0.5,0.5,0.5],
                curve: 'straight',
                dashArray: [0, 0, 0]
              },
              series: [{
                  name: "Data",
                  data: data

                },
                  {
                      name: "Label",
                      data: label
                  }
              ],


              title: {
                text:  "Smart Earthquake",
                align: 'center'
              },
              markers: {
                size: 0,

                hover: {
                  sizeOffset: 6
                }
              },
              xaxis: {
                categories: time,

              },




              grid: {
                borderColor: '#f1f1f1',

              }
            }

            var chart = new ApexCharts(
              document.querySelector("#chart1"),
              options
            );

            chart.render();

          }
        </script>

[1]：查看图片：https://i.stack.imgur.com/yA5X5.jpg

如何显示带有从数据库中获取的数据标签的数据？

0 个答案: