tab baru ketika bar chart di klik

ini js saya

 //basic bar chart
  if(jQuery('#barChart_1').length > 0 ){
    const barChart_1 = document.getElementById("barChart_1").getContext('2d');
    
    barChart_1.height = 100;

    new Chart(barChart_1, {
      type: 'bar',
      data: {
          defaultFontFamily: 'Poppins',
          labels: [
            "Jan", 
            "Feb", 
            "Mar", 
            "Apr", 
            "May", 
            "Jun", 
            "Jul", 
            "Aug", 
            "Sep", 
            "Oct", 
            "Nov", 
            "Des"
          ],
          datasets: [
            {
              label: "Kejahatan Selesai",
              data: [
                {{ $jan_f_diagram_done }}, 
                {{ $feb_f_diagram_done }}, 
                {{ $mar_f_diagram_done }}, 
                {{ $apr_f_diagram_done }}, 
                {{ $mei_f_diagram_done }}, 
                {{ $jun_f_diagram_done }}, 
                {{ $jul_f_diagram_done }}, 
                {{ $aug_f_diagram_done }}, 
                {{ $sep_f_diagram_done }}, 
                {{ $oct_f_diagram_done }}, 
                {{ $nov_f_diagram_done }}, 
                {{ $des_f_diagram_done }},
              ],
              borderColor: 'rgba(58, 122, 254, 1)',
              borderWidth: "0",
              backgroundColor: 'rgba(58, 122, 254, 1)'
            },
            {
              label: "Kejahatan Progress",
              data: [
                {{ $jan_f_diagram_progres }}, 
                {{ $feb_f_diagram_progres }}, 
                {{ $mar_f_diagram_progres }}, 
                {{ $apr_f_diagram_progres }}, 
                {{ $mei_f_diagram_progres }}, 
                {{ $jun_f_diagram_progres }}, 
                {{ $jul_f_diagram_progres }}, 
                {{ $aug_f_diagram_progres }}, 
                {{ $sep_f_diagram_progres }}, 
                {{ $oct_f_diagram_progres }}, 
                {{ $nov_f_diagram_progres }}, 
                {{ $des_f_diagram_progres }},
              ],
              borderColor: 'rgba(58, 122, 254, 1)',
              borderWidth: "0",
              backgroundColor: 'rgb(234,67,53)'
            }
          ]
      },
      options: {
        legend: false, 
        scales: {
          yAxes: [{
              ticks: {
                  beginAtZero: true
              }
          }],
          xAxes: [{
              // Change here
              barPercentage: 0.5
          }]
        }
      }
    });
  }

bagaimana cara pas kita click bar chart, langsung redirect ke detail data bar tersebut
avatar yazidhilman

@yazidhilman

5 Kontribusi 0 Poin


Jawaban

Berikut adalah contoh kode penggunaan event pada Chartjs :

{
  data: {
    datasets: [{
      datalabels: {
        listeners: {
          click: function(context) {
            // Receives `click` events only for labels of the first dataset.
            // The clicked label index is available in `context.dataIndex`.
            console.log('label ' + context.dataIndex + ' has been clicked!');
          }
        }
      }
    }, {
        //...
    }]
  },
  options: {
    plugins: {
      datalabels: {
        listeners: {
          enter: function(context) {
            // Receives `enter` events for any labels of any dataset. Indices of the
            // clicked label are: `context.datasetIndex` and `context.dataIndex`.
            // For example, we can modify keep track of the hovered state and
            // return `true` to update the label and re-render the chart.
            context.hovered = true;
            return true;
          },
          leave: function(context) {
            // Receives `leave` events for any labels of any dataset.
            context.hovered = false;
            return true;
          }
        },
        color: function(context) {
          // Change the label text color based on our new `hovered` context value.
          return context.hovered ? "blue" : "gray";
        }
      }
    }
  }
}

Untuk informasi lebih jelasnya silahkan buka https://chartjs-plugin-datalabels.netlify.app/guide/events.html#listeners 
avatar ahanafi

@ahanafi

666 Kontribusi 410 Poin


Login untuk gabung berdiskusi