导出Highcharts极坐标图csv,其中类别代替极坐标

导出Highcharts极坐标图csv,其中类别代替极坐标,highcharts,export-to-csv,Highcharts,Export To Csv,我已经实现了一个极坐标图,其中每个系列有4个对应于4个类别的值。当我导出图表csv时,类别列包含极坐标。我想用相应的类别名称替换这些名称。我该怎么做 将类别添加到每个系列中没有任何效果。我还尝试向xAxis添加categories属性,但没有效果。xAxis.label格式化程序成功返回每个数据极坐标的类别名称 const options = { chart: { polar: true, }, title: { text: '', }, tooltip: {

我已经实现了一个极坐标图,其中每个系列有4个对应于4个类别的值。当我导出图表csv时,
类别
列包含极坐标。我想用相应的类别名称替换这些名称。我该怎么做

将类别添加到每个系列中没有任何效果。我还尝试向xAxis添加categories属性,但没有效果。xAxis.label格式化程序成功返回每个数据极坐标的类别名称

const options = {
  chart: {
    polar: true,
  },
  title: {
    text: '',
  },
  tooltip: {
    valueDecimals: 2,
    headerFormat: '<br/>',
  },
  legend: {},
  pane: {
    startAngle: 0,
    endAngle: 360,
  },
  xAxis: {
    tickInterval: 45,
    min: 0,
    max: 360,
    labels: {
      // eslint-disable-next-line
      formatter: function() {
        switch (this.value) {
          case 45:
            return '<b>Experience</b>'
          case 135:
            return '<b>Frictionless</b>'
          case 225:
            return '<b>Low Price</b>'
          case 315:
            return '<b>Brand</b>'
          default:
            return ''
        }
      },
    },
  },
  yAxis: {
    min: 0,
    max: 10,
    labels: {
      format: '{}',
    },
  },
  plotOptions: {
    series: {
      pointStart: 45,
      pointInterval: 90,
    },
    column: {
      pointPadding: 0,
      groupPadding: 0,
    },
  },
  series: kahnSeries,
}
const选项={
图表:{
是的,
},
标题:{
文本:“”,
},
工具提示:{
数值小数:2,
标题:“
”, }, 图例:{}, 窗格:{ startAngle:0, 端角:360, }, xAxis:{ 时间间隔:45, 分:0,, 最高:360, 标签:{ //eslint禁用下一行 格式化程序:函数(){ 开关(此值){ 案例45: 返回“经验” 案例135: 返回“无摩擦” 案例225: 返回“低价” 案例315: 返回“品牌” 违约: 返回“” } }, }, }, 亚克斯:{ 分:0,, 最高:10, 标签:{ 格式:“{}”, }, }, 打印选项:{ 系列:{ 起点:45, 点间距:90, }, 专栏:{ 点填充:0, 分组填充:0, }, }, 系列:kahnSeries, }
您需要使用
类别
属性,但不包括以下选项:
点间隔
点开始
最小值
最大值

xAxis: {
    categories: ['Experience', 'Frictionless', 'Low Price', 'Brand']
},
现场演示:


API参考:

为了避免更改图表的当前显示,我包装了getCSV函数并替换了CSV类别值。如果有更简单的方法,请分享

{
  (function (H) {
    H.wrap(H.Chart.prototype, 'getCSV', function (
      proceed,
      useLocalDecimalPoint
    ) {
      // Run the original proceed method
      const result = proceed.apply(
        this,
        Array.prototype.slice.call(arguments, 1)
      )
      const itemDelimiter = ','
      const lineDelimiter = '\n'
      const rows = result.split(lineDelimiter)
      let newResult = ''
      let rowCategories = false
      rows.forEach((row, rowIndex) => {
          const columns = row.split(itemDelimiter)
          if (rowIndex === 0 && columns[0] === '"Category"') {
            rowCategories = true
          }
          if (rowIndex > 0 && rowCategories) {
            let newRow = formatter(columns[0])
            columns.forEach((column, columnIndex) => {
              if (columnIndex > 0) {
                newRow += itemDelimiter
                newRow += column
              }
            })
            newResult += newRow
          } else {
            newResult += row
          }
          if (rowIndex < rows.length - 1) {
            newResult += lineDelimiter
          }
        }
      )
      return newResult
    })
  }(Highcharts))
}
{
(职能(H){
H.wrap(H.Chart.prototype,'getCSV',函数(
继续
useLocalDecimalPoint
) {
//运行原始的继续方法
const result=继续。应用(
这
Array.prototype.slice.call(参数,1)
)
常量itemdimiter=','
常量行分隔符='\n'
const rows=result.split(lineDelimiter)
让newResult=''
设rowCategories=false
rows.forEach((行,行索引)=>{
const columns=row.split(itemDelimiter)
if(行索引===0&&columns[0]===''Category'){
rowCategories=true
}
if(行索引>0&&rowCategories){
let newRow=格式化程序(列[0])
columns.forEach((column,columnIndex)=>{
如果(列索引>0){
newRow+=项目分隔符
newRow+=列
}
})
newResult+=newRow
}否则{
newResult+=行
}
if(rowIndex
谢谢@ppotaczek。这解决了我提出的问题。此外,我还要求每隔45度显示一次网格线,这就是添加您删除的选项的原因。是否有其他方法来确保显示这些线?Hi@softweave,您可以使用
绘图线
添加其他网格线: