高图-导出CSV包含其他数据

时间:2019-01-29 04:17:08

标签: jquery csv highcharts export

我有一系列的自定义数据,并且仅当用户将鼠标悬停在某个点上时显示。

如何使用highcharts csv导出选项导出它们?

Highcharts.setOptions({
  colors: ['lightgrey', 'black', 'red', '#ff7676']
});

Highcharts.chart('container', {
  chart: {
    type: 'column'
  },
  title: {
    text: 'Stock Report<br><b>Total Used:</b> 380'
  },
  subtitle: {
    text: '31 December 2018 - 29 January 2019'
  },
  xAxis: {
    categories: [
      '31 December', '01 January', '02 January', '03 January', '04 January', '05 January', '06 January', '07 January', '08 January', '09 January', '10 January', '11 January', '12 January', '13 January', '14 January', '15 January', '16 January', '17 January', '18 January', '19 January', '20 January', '21 January', '22 January', '23 January', '24 January', '25 January', '26 January', '27 January', '28 January', '29 January',
    ],
    //crosshair: true
  },
  yAxis: {
    min: 0,
    title: {
      text: 'No. of used stock'
    },
    stackLabels: {
      enabled: true,
      style: {
        fontWeight: 'bold',
      }
    }
  },
  tooltip: {
    // shared: true,
    formatter: function() {
      var h = this.x + '<br><b>' + this.series.name + '</b>';

      if (this.point.KidS)
        h += '<br>Kid-S: ' + this.point.KidS;

      if (this.point.KidM)
        h += '<br>Kid-M: ' + this.point.KidM;

      if (this.point.KidL)
        h += '<br>Kid-L: ' + this.point.KidL;

      if (this.point.XS)
        h += '<br>XS: ' + this.point.XS;

      if (this.point.S)
        h += '<br>S: ' + this.point.S;

      if (this.point.M)
        h += '<br>XS: ' + this.point.M;

      if (this.point.L)
        h += '<br>L: ' + this.point.L;

      if (this.point.XL)
        h += '<br>XL: ' + this.point.XL;

      h += '<br><br><b>Total:</b> ' + this.y;


      return h;
    }
  },
  plotOptions: {
    column: {
      stacking: 'normal',
      dataLabels: {
        enabled: true,
      }
    }
  },
  series: [{
      name: 'White',
      data: [{
        y: 8,
        'KidL': 0,
        'KidM': 0,
        'KidS': 0,
        'L': 1,
        'M': 1,
        'S': 3,
        'XL': 2,
        'XS': 1,
      }, {
        y: 11,
        'KidL': 2,
        'KidM': 0,
        'KidS': 0,
        'L': 1,
        'M': 5,
        'S': 1,
        'XL': 0,
        'XS': 2,
      }, {
        y: 6,
        'KidL': 0,
        'KidM': 0,
        'KidS': 0,
        'L': 3,
        'M': 0,
        'S': 1,
        'XL': 1,
        'XS': 1,
      }, {
        y: 4,
        'KidL': 2,
        'KidM': 0,
        'KidS': 0,
        'L': 0,
        'M': 1,
        'S': 1,
        'XL': 0,
        'XS': 0,
      }, {
        y: 6,
        'KidL': 0,
        'KidM': 0,
        'KidS': 0,
        'L': 1,
        'M': 2,
        'S': 2,
        'XL': 0,
        'XS': 1,
      }, {
        y: 11,
        'KidL': 1,
        'KidM': 0,
        'KidS': 0,
        'L': 1,
        'M': 4,
        'S': 2,
        'XL': 2,
        'XS': 1,
      }, {
        y: 18,
        'KidL': 1,
        'KidM': 1,
        'KidS': 0,
        'L': 2,
        'M': 3,
        'S': 4,
        'XL': 0,
        'XS': 6,
      }, {
        y: 2,
        'KidL': 0,
        'KidM': 0,
        'KidS': 0,
        'L': 0,
        'M': 0,
        'S': 1,
        'XL': 0,
        'XS': 1,
      }, {
        y: 7,
        'KidL': 2,
        'KidM': 0,
        'KidS': 0,
        'L': 0,
        'M': 3,
        'S': 1,
        'XL': 0,
        'XS': 1,
      }, {
        y: 6,
        'KidL': 2,
        'KidM': 1,
        'KidS': 0,
        'L': 2,
        'M': 0,
        'S': 1,
        'XL': 0,
        'XS': 0,
      }, {
        y: 1,
        'KidL': 0,
        'KidM': 0,
        'KidS': 0,
        'L': 0,
        'M': 0,
        'S': 1,
        'XL': 0,
        'XS': 0,
      }, {
        y: 4,
        'KidL': 0,
        'KidM': 0,
        'KidS': 0,
        'L': 1,
        'M': 2,
        'S': 1,
        'XL': 0,
        'XS': 0,
      }, {
        y: 1,
        'KidL': 0,
        'KidM': 0,
        'KidS': 0,
        'L': 0,
        'M': 1,
        'S': 0,
        'XL': 0,
        'XS': 0,
      }, {
        y: 9,
        'KidL': 1,
        'KidM': 0,
        'KidS': 2,
        'L': 0,
        'M': 1,
        'S': 0,
        'XL': 0,
        'XS': 5,
      }, {
        y: 9,
        'KidL': 0,
        'KidM': 5,
        'KidS': 1,
        'L': 0,
        'M': 1,
        'S': 1,
        'XL': 0,
        'XS': 1,
      }, {
        y: 1,
        'KidL': 0,
        'KidM': 0,
        'KidS': 0,
        'L': 0,
        'M': 1,
        'S': 0,
        'XL': 0,
        'XS': 0,
      }, {
        y: 1,
        'KidL': 0,
        'KidM': 0,
        'KidS': 0,
        'L': 0,
        'M': 1,
        'S': 0,
        'XL': 0,
        'XS': 0,
      }, {
        y: 5,
        'KidL': 0,
        'KidM': 0,
        'KidS': 0,
        'L': 0,
        'M': 2,
        'S': 3,
        'XL': 0,
        'XS': 0,
      }, {
        y: 3,
        'KidL': 0,
        'KidM': 0,
        'KidS': 0,
        'L': 0,
        'M': 1,
        'S': 1,
        'XL': 0,
        'XS': 1,
      }, {
        y: 8,
        'KidL': 0,
        'KidM': 0,
        'KidS': 0,
        'L': 1,
        'M': 2,
        'S': 4,
        'XL': 0,
        'XS': 1,
      }, {
        y: 19,
        'KidL': 2,
        'KidM': 3,
        'KidS': 0,
        'L': 2,
        'M': 5,
        'S': 5,
        'XL': 0,
        'XS': 2,
      }, {
        y: 14,
        'KidL': 3,
        'KidM': 0,
        'KidS': 1,
        'L': 1,
        'M': 3,
        'S': 4,
        'XL': 0,
        'XS': 2,
      }, {
        y: 1,
        'KidL': 0,
        'KidM': 0,
        'KidS': 0,
        'L': 1,
        'M': 0,
        'S': 0,
        'XL': 0,
        'XS': 0,
      }, {
        y: 12,
        'KidL': 1,
        'KidM': 2,
        'KidS': 0,
        'L': 1,
        'M': 2,
        'S': 3,
        'XL': 0,
        'XS': 3,
      }, {
        y: 1,
        'KidL': 0,
        'KidM': 0,
        'KidS': 0,
        'L': 0,
        'M': 1,
        'S': 0,
        'XL': 0,
        'XS': 0,
      }, {
        y: 2,
        'KidL': 0,
        'KidM': 0,
        'KidS': 0,
        'L': 0,
        'M': 0,
        'S': 0,
        'XL': 0,
        'XS': 2,
      }, {
        y: 5,
        'KidL': 0,
        'KidM': 0,
        'KidS': 0,
        'L': 1,
        'M': 1,
        'S': 1,
        'XL': 0,
        'XS': 2,
      }, {
        y: 1,
        'KidL': 0,
        'KidM': 0,
        'KidS': 0,
        'L': 1,
        'M': 0,
        'S': 0,
        'XL': 0,
        'XS': 0,
      }, {
        y: 1,
        'KidL': 0,
        'KidM': 0,
        'KidS': 0,
        'L': 1,
        'M': 0,
        'S': 0,
        'XL': 0,
        'XS': 0,
      }, ]
    },
    {
      name: 'Black',
      data: [{
        y: 12,
        'KidL': 0,
        'KidM': 0,
        'KidS': 0,
        'L': 3,
        'M': 1,
        'S': 2,
        'XL': 1,
        'XS': 5,
      }, {
        y: 16,
        'KidL': 0,
        'KidM': 0,
        'KidS': 0,
        'L': 4,
        'M': 3,
        'S': 8,
        'XL': 1,
        'XS': 0,
      }, {
        y: 7,
        'KidL': 0,
        'KidM': 0,
        'KidS': 0,
        'L': 5,
        'M': 1,
        'S': 1,
        'XL': 0,
        'XS': 0,
      }, {
        y: 5,
        'KidL': 0,
        'KidM': 0,
        'KidS': 0,
        'L': 3,
        'M': 0,
        'S': 2,
        'XL': 0,
        'XS': 0,
      }, {
        y: 4,
        'KidL': 0,
        'KidM': 0,
        'KidS': 0,
        'L': 2,
        'M': 0,
        'S': 2,
        'XL': 0,
        'XS': 0,
      }, {
        y: 9,
        'KidL': 0,
        'KidM': 0,
        'KidS': 0,
        'L': 4,
        'M': 0,
        'S': 5,
        'XL': 0,
        'XS': 0,
      }, {
        y: 8,
        'KidL': 0,
        'KidM': 0,
        'KidS': 0,
        'L': 0,
        'M': 2,
        'S': 6,
        'XL': 0,
        'XS': 0,
      }, {
        y: 4,
        'KidL': 0,
        'KidM': 0,
        'KidS': 0,
        'L': 0,
        'M': 1,
        'S': 3,
        'XL': 0,
        'XS': 0,
      }, {
        y: 14,
        'KidL': 0,
        'KidM': 0,
        'KidS': 0,
        'L': 11,
        'M': 0,
        'S': 3,
        'XL': 0,
        'XS': 0,
      }, {
        y: 2,
        'KidL': 0,
        'KidM': 0,
        'KidS': 0,
        'L': 1,
        'M': 0,
        'S': 1,
        'XL': 0,
        'XS': 0,
      }, {
        y: 1,
        'KidL': 0,
        'KidM': 0,
        'KidS': 0,
        'L': 1,
        'M': 0,
        'S': 0,
        'XL': 0,
        'XS': 0,
      }, {
        y: 8,
        'KidL': 0,
        'KidM': 0,
        'KidS': 0,
        'L': 2,
        'M': 0,
        'S': 6,
        'XL': 0,
        'XS': 0,
      }, {
        y: 3,
        'KidL': 0,
        'KidM': 0,
        'KidS': 0,
        'L': 0,
        'M': 0,
        'S': 2,
        'XL': 0,
        'XS': 1,
      }, {
        y: 16,
        'KidL': 2,
        'KidM': 1,
        'KidS': 1,
        'L': 3,
        'M': 1,
        'S': 6,
        'XL': 0,
        'XS': 2,
      }, {
        y: 6,
        'KidL': 1,
        'KidM': 0,
        'KidS': 1,
        'L': 2,
        'M': 0,
        'S': 2,
        'XL': 0,
        'XS': 0,
      }, {
        y: 1,
        'KidL': 0,
        'KidM': 0,
        'KidS': 0,
        'L': 0,
        'M': 0,
        'S': 1,
        'XL': 0,
        'XS': 0,
      }, {
        y: 2,
        'KidL': 0,
        'KidM': 0,
        'KidS': 0,
        'L': 1,
        'M': 0,
        'S': 1,
        'XL': 0,
        'XS': 0,
      }, {
        y: 2,
        'KidL': 0,
        'KidM': 0,
        'KidS': 0,
        'L': 0,
        'M': 0,
        'S': 2,
        'XL': 0,
        'XS': 0,
      }, {
        y: 12,
        'KidL': 0,
        'KidM': 0,
        'KidS': 2,
        'L': 3,
        'M': 0,
        'S': 7,
        'XL': 0,
        'XS': 0,
      }, {
        y: 6,
        'KidL': 0,
        'KidM': 1,
        'KidS': 0,
        'L': 3,
        'M': 0,
        'S': 2,
        'XL': 0,
        'XS': 0,
      }, {
        y: 2,
        'KidL': 0,
        'KidM': 0,
        'KidS': 0,
        'L': 0,
        'M': 0,
        'S': 2,
        'XL': 0,
        'XS': 0,
      }, {
        y: 5,
        'KidL': 0,
        'KidM': 0,
        'KidS': 0,
        'L': 1,
        'M': 1,
        'S': 3,
        'XL': 0,
        'XS': 0,
      }, {
        y: 4,
        'KidL': 1,
        'KidM': 0,
        'KidS': 0,
        'L': 1,
        'M': 0,
        'S': 2,
        'XL': 0,
        'XS': 0,
      }, {
        y: 3,
        'KidL': 0,
        'KidM': 0,
        'KidS': 0,
        'L': 2,
        'M': 0,
        'S': 1,
        'XL': 0,
        'XS': 0,
      }, {
        y: 1,
        'KidL': 0,
        'KidM': 0,
        'KidS': 0,
        'L': 0,
        'M': 0,
        'S': 0,
        'XL': 1,
        'XS': 0,
      }, {
        y: 18,
        'KidL': 1,
        'KidM': 2,
        'KidS': 0,
        'L': 8,
        'M': 0,
        'S': 6,
        'XL': 0,
        'XS': 0,
      }, {
        y: 2,
        'KidL': 0,
        'KidM': 0,
        'KidS': 0,
        'L': 1,
        'M': 0,
        'S': 1,
        'XL': 0,
        'XS': 0,
      }, ]
    },
    {
      name: 'Red',
      data: [{
        y: 2,
        'KidL': 0,
        'KidM': 1,
        'KidS': 0,
        'L': 0,
        'M': 0,
        'S': 0,
        'XL': 1,
        'XS': 0,
      }, {
        y: 3,
        'KidL': 0,
        'KidM': 3,
        'KidS': 0,
        'L': 0,
        'M': 0,
        'S': 0,
        'XL': 0,
        'XS': 0,
      }, {
        y: 1,
        'KidL': 0,
        'KidM': 0,
        'KidS': 1,
        'L': 0,
        'M': 0,
        'S': 0,
        'XL': 0,
        'XS': 0,
      }, {
        y: 1,
        'KidL': 0,
        'KidM': 1,
        'KidS': 0,
        'L': 0,
        'M': 0,
        'S': 0,
        'XL': 0,
        'XS': 0,
      }, {
        y: 5,
        'KidL': 2,
        'KidM': 2,
        'KidS': 1,
        'L': 0,
        'M': 0,
        'S': 0,
        'XL': 0,
        'XS': 0,
      }, {
        y: 4,
        'KidL': 1,
        'KidM': 3,
        'KidS': 0,
        'L': 0,
        'M': 0,
        'S': 0,
        'XL': 0,
        'XS': 0,
      }, {
        y: 1,
        'KidL': 0,
        'KidM': 1,
        'KidS': 0,
        'L': 0,
        'M': 0,
        'S': 0,
        'XL': 0,
        'XS': 0,
      }, {
        y: 1,
        'KidL': 1,
        'KidM': 0,
        'KidS': 0,
        'L': 0,
        'M': 0,
        'S': 0,
        'XL': 0,
        'XS': 0,
      }, {
        y: 5,
        'KidL': 4,
        'KidM': 0,
        'KidS': 0,
        'L': 0,
        'M': 0,
        'S': 1,
        'XL': 0,
        'XS': 0,
      }, {
        y: 6,
        'KidL': 2,
        'KidM': 1,
        'KidS': 3,
        'L': 0,
        'M': 0,
        'S': 0,
        'XL': 0,
        'XS': 0,
      }, ]
    },
  ],
  exporting: {
    enabled: true
  },
});
<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"></div>

1 个答案:

答案 0 :(得分:1)

您只需传递series.keys(一个指定哪个选项映射到数据点数组中的哪个键)的数组即可。

在您的示例中,该数组如下所示:

  plotOptions: {
    series: {
      keys: [
        'y', 'KidL', 'KidM', 'KidS', 'L', 'M', 'S', 'XL', 'XS'
      ]
    }
  }

演示:

API参考: