特定标签

Question

我需要在我的图表中添加一行来指示下一天的变化。当天的初始标签是00:00。是否有一个函数在我的图表中放置这样的一行，它将始终显示在00:00的标签中？

下图的配置：

Chart.defaults.global.defaultFontColor = 'white';
graffic = new Chart(document.getElementById("graffic").getContext('2d'), {
    type: 'line',
    fill: false,
    data: {
        labels : date_label,
        fill: false,
        datasets:data_to_grafic
    },
    options: {
        title: {
            position:'top',
            display: true,
            text: device
        },
        scales: {
            xAxes: [{
                display: true,
                scaleLabel: {
                    display: true,
                    labelString: 'HRS'
                }
            }],
            yAxes: [{
                ticks: {beginAtZero:true},
                display: true,
                scaleLabel: {
                    display: true,
                    labelString: 'BPS'
                }
            }]
        }
    }
});
graffic.update();

Answer 1

使用chartjs-plugin-annotation（https://github.com/chartjs/chartjs-plugin-annotation）

的解决方案

＆＃13;

＆＃13;

<?php
if(isset($_POST['submit_editGrowDetails'])){
    $edit_datePlanted = mysqli_real_escape_string($conn, $_POST['edit_datePlanted']);
    $edit_strain = mysqli_real_escape_string($conn, $_POST['edit_strain']);
    $edit_toMaturity = mysqli_real_escape_string($conn, $_POST['edit_toMaturity']);
    $edit_type = mysqli_real_escape_string($conn, $_POST['edit_type']);
    $edit_gender = mysqli_real_escape_string($conn, $_POST['edit_gender']);
    $edit_medium = mysqli_real_escape_string($conn, $_POST['edit_medium']);
    $edit_watts = mysqli_real_escape_string($conn, $_POST['edit_watts']);
    $edit_lightType = mysqli_real_escape_string($conn, $_POST['edit_lightType']);

    $name = $grow['name'];

    $edit_growDetails = "UPDATE grow_details
                 SET datePlanted = '$edit_datePlanted', 
                    strain = '$edit_strain', 
                    toMaturity = '$edit_toMaturity', 
                    type = '$edit_type', 
                    gender = '$edit_gender', 
                    medium = '$edit_medium', 
                    watts = '$edit_watts', 
                    lightType = '$edit_lightType' 
                 WHERE name = '$name'; ";

    $query_edit_growDetails = $conn->query($edit_growDetails);

    if($query_edit_growDetails) {
        echo '<p class="success" id="success">Successfully updated log for '.$name.'! <a class="refresh" href="journal.php">Refresh</a></p>';
    } else {
        echo '<p class="error" id="error">There was an error: '. $conn->error .'</p>';
    }
}
?>

＆＃13;

var date_label = ['8:00', '9:00', '10:00', '11:00', '00:00', '01:00', '02:00', '03:00', '4:00'];
var data_to_grafic = [{
  label: "My First dataset",
  backgroundColor: '#ddd',
  borderColor: '#f00',
  fill: false,
  data: [0, 0, 15000, 35000, 10000, 36000, 0, 0, 0, 0]
}];
var graffic = new Chart(document.getElementById("graffic").getContext('2d'),{
  type: 'line',
  data: {
    labels: date_label,
    fill: false,
    datasets: data_to_grafic
  },
  options: {
    title: {
      position: 'top',
      display: true,
      text: 'My Title'
    },
    annotation: {
      annotations: [{
        type: "line",
        mode: "vertical",
        scaleID: "x-axis-0",
        value: "00:00",
        borderColor: "red",
        borderWidth: 2
      }]
    },
    scales: {
      xAxes: [{
        display: true,
        scaleLabel: {
          display: true,
          labelString: 'HRS'
        }
      }],
      yAxes: [{
        ticks: {
          beginAtZero: true
        },
        display: true,
        scaleLabel: {
          display: true,
          labelString: 'BPS'
        }
      }]
    }
  }
});

＆＃13;

＆＃13;

＆＃13;