将 Chart.js 数据导出或下载为 CSV 文件

Question

我有来自https://gmlews.com/api/data的API数据。我用chart.js绘制了accelero_x的数据图，如下所示：

$(document).ready(function(){
$.datepicker.setDefaults({
    dateFormat: 'yy-mm-dd'
  });
  $("#firstdatepicker").datepicker();
  $("#lastdatepicker").datepicker();
  $("#filter").click(function() {
    var from_date = $("#firstdatepicker").val();
    var to_date = $("#lastdatepicker").val();
    if (from_date != '' && to_date != '') {
      console.log(from_date, to_date);
      var endpoint = '/api/data';

  $.ajax({
    method: "GET",
    url: endpoint,
    data: {
      from_date: from_date,
      to_date: to_date
    },
    success: function(data){
      console.log(data); //get all data
      //get data by fields
      var accelero_x = [], time = [];
      for (var i=0; i<data.length; i++){
        accelero_x.push(data[i].accelero_x);
        time.push(data[i].timestamp);
     }
      console.log(accelero_x);
      console.log(time);
    //plot the chart

      var ctx = document.getElementById("acceleroxChart").getContext('2d');
      var acceleroxChart = new Chart(ctx, {
          type: 'line',
          data: {
              labels: time,
              datasets: [{
                  label: 'Accelero-x (mV/g)',
                  data: accelero_x,
                  fill: false,
                  borderColor: "#80b6f4",
                pointBorderColor: "#80b6f4",
                pointBackgroundColor: "#80b6f4",
                pointHoverBackgroundColor: "#80b6f4",
                pointHoverBorderColor: "#80b6f4",
                pointBorderWidth: 10,
                pointHoverRadius: 10,
                pointHoverBorderWidth: 1,
                pointRadius: 1,
                borderWidth: 4,
              }]
          },
          options: {
              reponsive: true,
              scales: {
                  yAxes: [{
                      ticks: {
                          beginAtZero:false,
                          stepSize:0.5
                      },
                        scaleLabel: {
                        display:     true,
                        labelString: 'Accelero sb.x (mV/g)'
                    }
                  }],
                  xAxes: [{

                          display: true,
                          type: "time",
                          time: {
                                minUnit: "hour",
                                unit: "hour",
                                unitStepSize: 6,
                                min: moment(from_date).toDate(),//Date object type
                                max: moment(to_date).toDate()//Date object type
                          },
                        scaleLabel: {
                        display:     true,
                        labelString: 'Time'
                    }
                  }]
              }
          }
      });
    },
    error: function(error_data){
      console.log(error_data)
    }
  });
} else {
  alert("Please Select Date");
}
  });    
});

问题是如何从图表中下载/导出数据到CSV？在CSV上显示的数据是日期时间和accelero_x的值，我是一个新手程序员。我希望有人能帮我编写代码。

- Estri. P Lestari

Answer 1

看起来这个链接就是你要找的，只不过是用canvasjs实现的。我在这里将其改编为ChartJS：

以下是相关代码：

const dataLabels = ['Jan', 'Feb', 'March', 'April', 'May', 'June', 'July'];
const data = {
  labels: dataLabels,
  datasets: [{
      label: 'Dataset 1',
      data: [65, 59, 80, 81, 56, 55, 40],
      backgroundColor: [
        'rgba(255, 99, 132, 0.2)',
        'rgba(255, 159, 64, 0.2)',
        'rgba(255, 205, 86, 0.2)',
        'rgba(75, 192, 192, 0.2)',
        'rgba(54, 162, 235, 0.2)',
        'rgba(153, 102, 255, 0.2)',
        'rgba(201, 203, 207, 0.2)'
      ],
      borderColor: [
        'rgb(255, 99, 132)',
        'rgb(255, 159, 64)',
        'rgb(255, 205, 86)',
        'rgb(75, 192, 192)',
        'rgb(54, 162, 235)',
        'rgb(153, 102, 255)',
        'rgb(201, 203, 207)'
      ],
      borderWidth: 1
    },
    {
      label: 'Dataset 2',
      data: [55, 69, 70, 61, 66, 45, 50],
      backgroundColor: [
        'rgba(255, 99, 132, 0.2)',
        'rgba(255, 159, 64, 0.2)',
        'rgba(255, 205, 86, 0.2)',
        'rgba(75, 192, 192, 0.2)',
        'rgba(54, 162, 235, 0.2)',
        'rgba(153, 102, 255, 0.2)',
        'rgba(201, 203, 207, 0.2)'
      ],
      borderColor: [
        'rgb(255, 99, 132)',
        'rgb(255, 159, 64)',
        'rgb(255, 205, 86)',
        'rgb(75, 192, 192)',
        'rgb(54, 162, 235)',
        'rgb(153, 102, 255)',
        'rgb(201, 203, 207)'
      ],
      borderWidth: 1
    }
  ]
};

const config = {
  type: 'bar',
  data: data,
  options: {
    scales: {
      y: {
        beginAtZero: true
      }
    }
  },
};

var chart = new Chart(document.getElementById('chartContainer'), config);

document.getElementById("downloadCSV").addEventListener("click", function() {
  downloadCSV({
    filename: "chart-data.csv",
    chart: chart
  })
});

function convertChartDataToCSV(args) {
  let result, columnDelimiter, lineDelimiter, labels, data;

  data = args.data.data || null;
  if (data == null || !data.length) {
    return null;
  }

  labels = args.labels || null;
  if (labels == null || !labels.length) {
    return null;
  }

  columnDelimiter = args.columnDelimiter || ',';
  lineDelimiter = args.lineDelimiter || '\n';

  result = '' + columnDelimiter;
  result += labels.join(columnDelimiter);
  result += lineDelimiter;

  result += args.data.label.toString();

  for (let i = 0; i < data.length; i++) {
    result += columnDelimiter;
    result += data[i];
  }
  result += lineDelimiter;

  return result;
}

function downloadCSV(args) {
  var data, filename, link;
  var csv = "";
  for (var i = 0; i < chart.data.datasets.length; i++) {
    csv += convertChartDataToCSV({
      data: chart.data.datasets[i],
      labels: dataLabels
    });
  }
  if (csv == null) return;
  console.log(csv);

  filename = args.filename || 'chart-data.csv';
  if (!csv.match(/^data:text\/csv/i)) {
    csv = 'data:text/csv;charset=utf-8,' + csv;
  }

  // not sure if anything below this comment works
  data = encodeURI(csv);
  link = document.createElement('a');
  link.setAttribute('href', data);
  link.setAttribute('download', filename);
  document.body.appendChild(link); // Required for FF
  link.click();
  document.body.removeChild(link);
}

<script src=" https://cdn.jsdelivr.net/npm/chart.js@4.2.0/dist/chart.umd.min.js "></script>
<canvas id="chartContainer" style="height: 360px; width: 100%;"></canvas>
<button id="downloadCSV">Download Chart Data as CSV</button>

- emdashii