Блог

Я пытаюсь показать weight_id, полученный из данных mysql в chart.js всплывающая подсказка (показана как (weight_ids[index]) на изображении). И позже я намерен показать модальную подсказку вместо всплывающей, чтобы пользователи могли обновлять или удалять эти данные. Я предполагаю, что я не смогу достичь этого, не связав данные точки линейной диаграммы с идентификатором, хранящимся в mysql. Как я могу включить эти идентификационные данные?

Я был бы очень признателен за любую помощь. введите описание изображения здесь

Мой код выглядит следующим образом:

   <canvas id="myChart"></canvas>
    <script src="https://cdn.jsdelivr.net/npm/chart.js@2.9.4/dist/Chart.min.js"></script>
    {{-- グラフを描画--}} 
    <script>
    //ラベル
    const labels = @json($date_labels);
    
    // id
    const weight_ids = @json($weight_ids);
    
    //体重ログ
    const weight_logs = @json($weight_logs);
    
    const aryMax = function(a, b) {
     return Math.max(a, b);
    };
    
    const aryMin = function(a, b) {
      return Math.min(a, b);
    };
    
    let min_label = Math.floor((weight_logs).reduce(aryMin) - 0.5);
    let max_label = Math.ceil((weight_logs).reduce(aryMax)   0.5);
    
    console.log(weight_ids);
    console.log(weight_logs);
    console.log(min_label, max_label);
  
    //グラフを描画
     var ctx = document.getElementById("myChart");
     var myChart = new Chart(ctx, {
        type: 'line',
        data : {
            labels: labels,       // x軸ラベル
            datasets: [
                {
                    label: `Weight (weight_ids[index])`,    
                    data: weight_logs,
                    tension: 0,
                    borderColor: "rgba(37,78,255,1)",
            backgroundColor: "rgba(0,0,0,0)",
            pointRadius: 3
                }
            ]
        },
        options: {
            title: {
                display: false,
                text: ''
            },
            legend: {
              display: false,
            },
            scales: {
              yAxes: [
                {
                  ticks: {
                    min: min_label, // ラベル最小値
                    max: max_label, // ラベル最大値
                  },
                  scaleLabel: {        
                  display: true,
                  fontSize: 16,
                  labelString: '体重 (kg)'
                  }
                }
             ],
          },
          hover: {
            mode: 'point'
          },
          onClick: function clickHandler(evt) {
            var firstPoint = myChart.getElementAtEvent(evt)[0];

          if (firstPoint) {
              var label = myChart.data.labels[firstPoint._index];
              var value = myChart.data.datasets[firstPoint._datasetIndex].data[firstPoint._index];
              
              console.log(label);
              console.log(value);
              
              if (value) {
                $('#weidhtModal').modal('show');
              }
          }
          }
        }
     });
    </script>
 

Спасибо!

Я нашел способ получить weight_id с помощью следующей функции.

 onClick: function clickHandler(evt, activeElements) {
  if (activeElements.length) {
    var element = this.getElementAtEvent(evt);
    var index = element[0]._index;
    var _datasetIndex = element[0]._datasetIndex;
    var weightId = weight_ids[index];
    var weightLog = weight_logs[index];
    
    console.log(index);
    console.log(weightId);
    console.log(this.data.labels[index]);
    console.log(weightLog);
    
  }
}