导出Highcharts极坐标图csv,其中类别代替极坐标
我已经实现了一个极坐标图,其中每个系列有4个对应于4个类别的值。当我导出图表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: {
类别
列包含极坐标。我想用相应的类别名称替换这些名称。我该怎么做
将类别添加到每个系列中没有任何效果。我还尝试向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,您可以使用绘图线
添加其他网格线: