Question

我在Highcharts中具有条形图可视化，并且通过手动输入数据来创建可视化（请看输入值底部的代码）。我希望能够包含一些功能，该功能可以从本地存储的CSV文件中获取数据，例如在计算机的“文档”文件夹中。是否可以从我的计算机本地获取CSV文件并将其导入JS小提琴？如果没有，那么说CSV文件存储在我的Google驱动器帐户中。有没有可以使用的API（可以在JS小提琴的HTML部分中加载），可以选择所需的CSV文件并进行加载？ CSV文件将包含3列：类别（即访问次数（1、2，.... 29 +），Q1 / 18（TTM）年度访客价值以及相应访问的第一次和第二次访问之间的天数类别。该函数将从每一列中提取数据，并将它们放在我的代码的适当区域中以构成图表。

我想自动引入数据，以便不必手动输入所有值即可进行新的可视化显示。

我当前的代码是：

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>

我该怎么做？我非常感谢您的帮助！

将数据从CSV文件导入HighCharts

0 个答案: