Highcharts:极坐标图无法在动态加载的数据中正确显示系列
Highcharts: Polar chart does not display series correctly in dinamically loaded data
我正在尝试构建一个极坐标图,您可以在其中从数据集服务器端动态添加轴(我已将代码精简到最低限度)
这是我到目前为止尝试做的事情:
function loadToRadar(chart){
// if type of chart == 'undefined', we initialize a new chart
if ( typeof radarChart == 'undefined'){
radarChart = initializeRadarChart(chart, this);
return
}
// add new xAxis category
let newCategories = chart.xAxis[0].categories;
newCategories.push(newColumnCat);
chart.xAxis[0].setCategories(newCategories);
// add new yAxis
chart.addAxis(
{
min : newMin,
max : newMax,
showLastLabel : true,
gridLineInterpolation: 'polygon',
},
false // is X axis?
);
// add new point to series
chart.series[0].addPoint([newMean]) // access the original series and addpoint
}
var chart;
function initializeRadarChart(chart, column){
console.log('initializeRadarChart called');
chart = Highcharts.chart('radar-chart', {
chart: {
parallelCoordinates: true,
parallelAxes: {
gridLineWidth: 1
},
polar: true
},
xAxis: {
categories: [
column.columnCat
],
tickmarkPlacement :'on',
labels: {
style: {
color: 'black'
}
}
},
yAxis: [
{
min : this.min,
max : this.max,
showLastLabel : true,
gridLineInterpolation: 'polygon',
},
],
series: [
{
name :'firstSeries',
data : 5 //random num
},
]
});
return chart;
}
这是输出图像:
如您所见,系列中的点已加载到正确的类别中,但它们仅显示在原始行中。
添加了示例 jsfiddle
感谢您的演示。我仔细研究了这个问题,这对我来说似乎是一个错误。我在 Highcharts GitHub 问题频道上报告了它,您可以在其中关注线程或向核心开发人员寻求解决方法。
我正在尝试构建一个极坐标图,您可以在其中从数据集服务器端动态添加轴(我已将代码精简到最低限度)
这是我到目前为止尝试做的事情:
function loadToRadar(chart){
// if type of chart == 'undefined', we initialize a new chart
if ( typeof radarChart == 'undefined'){
radarChart = initializeRadarChart(chart, this);
return
}
// add new xAxis category
let newCategories = chart.xAxis[0].categories;
newCategories.push(newColumnCat);
chart.xAxis[0].setCategories(newCategories);
// add new yAxis
chart.addAxis(
{
min : newMin,
max : newMax,
showLastLabel : true,
gridLineInterpolation: 'polygon',
},
false // is X axis?
);
// add new point to series
chart.series[0].addPoint([newMean]) // access the original series and addpoint
}
var chart;
function initializeRadarChart(chart, column){
console.log('initializeRadarChart called');
chart = Highcharts.chart('radar-chart', {
chart: {
parallelCoordinates: true,
parallelAxes: {
gridLineWidth: 1
},
polar: true
},
xAxis: {
categories: [
column.columnCat
],
tickmarkPlacement :'on',
labels: {
style: {
color: 'black'
}
}
},
yAxis: [
{
min : this.min,
max : this.max,
showLastLabel : true,
gridLineInterpolation: 'polygon',
},
],
series: [
{
name :'firstSeries',
data : 5 //random num
},
]
});
return chart;
}
这是输出图像:
如您所见,系列中的点已加载到正确的类别中,但它们仅显示在原始行中。
添加了示例 jsfiddle
感谢您的演示。我仔细研究了这个问题,这对我来说似乎是一个错误。我在 Highcharts GitHub 问题频道上报告了它,您可以在其中关注线程或向核心开发人员寻求解决方法。