javascript - 将 CSV 文件中的数据导入 HighCharts

Question

我在 Highcharts 中有一个条形图可视化，我通过手动输入数据创建了可视化（查看我在底部输入值的代码）。我希望能够包含一些可以从本地存储的 CSV 文件中获取数据的功能，例如，在我计算机的“文档”文件夹中。是否可以从我的计算机本地获取 CSV 文件并将其带入 JS fiddle？如果没有，假设 CSV 文件存储在我的 Google Drive 帐户中。是否有我可以使用的 API（并在 JS fiddle 的 HTML 部分中加载）允许我选择所需的 CSV 文件并加载它？CSV 文件将包含 3 列：类别（即访问次数（1、2、....29+））、Q1 / 18 (TTM) 年度客户价值以及相应的第 1 次和第 2 次访问之间的天数类别。

我想自动引入数据，这样我就不必手动输入所有值来创建新的可视化。

我目前的代码是：

Highcharts.chart('container', {
  chart: {
    type: 'bar'
  },
 
  title: {
    text: null,
    align: 'center',
    verticalAlign: 'bottom',
  },
  xAxis: {
    categories: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11-17', '18-28', '29+'],

    title: {
      text: 'Visits Per Customer (TTM)'
    },
  },
  yAxis: {
    min: 0,
    gridLineWidth: 0,
  	minorGridLineWidth: 0,     
    
    title: {
      text: 'Average Return Rate Overall: 64 Days',
      y: 10
    },
    
    labels: {
      overflow: 'justify'
      
    }
  },
  
  tooltip: {
    headerFormat: '<span style="font-size:10px">{point.key}</span><table>',
    pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' +
      '<td style="padding:0"><b>{point.y:.0f} </b></td></tr>',
    footerFormat: '</table>',
    shared: true,
    useHTML: true
  },
  plotOptions: {
    bar: {
      dataLabels: {
        enabled: true,
      }
    }
  },
  legend: {
  
    layout: 'horizontal',
    align: 'right',
    verticalAlign: 'top',
    x: -25,
    y: 5,
    floating: true,
    borderWidth: 1,
    backgroundColor: ((Highcharts.theme && Highcharts.theme.legendBackgroundColor) || '#FFFFFF'),
   
    shadow: true
    
  },
  credits: {
    enabled: false
  },
  series: [{
    name: 'Q1 / 18 (TTM) Annual Guest Value',
    data: [0, 96.6, 73.2, 60.3, 52.5, 46.6, 41.4, 37.5, 34.4, 31.9, 25.4, 17.0, 9.7],
    color: 'grey',
    // label color
    dataLabels: {
      style: {
        color: 'grey'
       
      }
    }
  }, {
    name: 'Days Between 1st and 2nd Visits',
    data: [23, 45, 65, 85, 105, 125, 144, 163, 179, 199, 258, 394, 847],
    color: 'green',
    // label color
    dataLabels: {
      style: {
        color: 'green'
      }
    }
  }]
});

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/export-data.js"></script>

<div id="container" style="min-width: 310px; max-width: 800px; height: 400px; margin: 0 auto"></div>

我怎么能做这样的事情？我非常感谢您的帮助！

标签： javascripthtmlcsshighcharts