Question

我有一个返回图表的脚本（Highcharts），除了不显示x轴上列的名称外，它还可以正常工作。任何人都可以看到我出错的地方。

我的Json： [{＆＃34;数据＆＃34;：30.95]}，{＆＃34;数据＆＃34;：[2.38]}，{＆＃34;数据＆＃34;：66.67]}]

我的剧本：

$(function () {

var colors = ['#FF0000','#FF9900','#009900'];
colorIterator = 0;
var chart;
$(document).ready(function() {

$.getJSON("../charts/1-2-4-reports_chart.php?TAG=<?php echo $_POST['SectionVar'];?>&From=<?php echo $StartDate;?>&To=<?php echo $EndDate;?>", function(json) {

chart = new Highcharts.Chart({
chart: {
renderTo: 'container1',
type: 'column',
height: 200,
marginRight: 25,
marginBottom: 25,
plotBackgroundColor: '#FCFFC5',
style: {
fontFamily: 'serif',
fontSize: '8px',
}
},

title: {
text: 'Net Promoter Score: <?php echo $_POST['SectionVar'];?>',
x: -20,
style: {
fontFamily: 'Tahoma',
color: '#000000',
fontWeight: 'normal',
fontSize: '11px'
} //center
},

subtitle: {
text: '',
},

xAxis: {
categories: ['Detractors', 'Passives', 'Promoters'],
title: {
text: ''

}
},

yAxis: {

//reversedStacks: false,
endOnTick: false,
max:101,
showFirstLabel: false,
lineColor:'#999',
lineWidth:1,
tickColor:'#666',
tickWidth:1,
tickLength:2,
tickInterval: 10,
gridLineColor:'#ddd',
title: {
text: '',
style: {
fontFamily: 'Tahoma',
color: '#000000',
fontWeight: 'bold',
fontSize: '8px'
}
},
plotLines: [{
color: '#808080'
}]
},

credits: {
enabled: false
},

tooltip: {
formatter: function() {
return '<b>Guest responses: '+ this.y +'<br/>'+ this.series.name +'</b><br/>Month:'+
this.x;
}
},



navigation: {
buttonOptions: {
verticalAlign: 'top',
y: -10,
x: -20
}
},

legend: {
enabled: false,
layout: 'vertical',
align: 'right',
verticalAlign: 'top',
x: -10,
y: 100,
borderWidth: 1
},

colors: [
'#FF0000',
'#FF9900',
'#009900',
],

plotOptions: {
column: {
colorByPoint: false
},

series: {
type: 'column',
cursor: 'pointer',
pointWidth: 30,
point: {
events: {
//click: function() {
//location.href = "feedback-items_detractors_iframe.php?FromDate1=<?php echo $StartDate;?>&ToDate1=<?php echo $EndDate;?> target='iframe2'";
//}
}
},

legendIndex:0,

dataLabels: {
enabled: true,
color: '#000000',
align: 'center',
cursor: 'pointer',
//borderRadius: 5,
//backgroundColor: 'rgba(252, 255, 255, 255)',
//borderWidth: 1,
//borderColor: '#AAA',
y: -6,
format: '{y:.2f} %', // one decimal
y: -20, // 10 pixels down from the top
this.series.name
style: {
textShadow: false,
fontSize: '8px',
fontFamily: 'Verdana, sans-serif'
}
}
}

},

exporting: {
chartOptions: { // specific options for the exported image
plotOptions: {
series: {
dataLabels: {
enabled: true
}
}
}
},
fallbackToExportServer: false
},



series: json,

});
});

});


});

非常感谢你的时间。

Answer 1

您在代码中出现了一些语法错误，修复版本如下：

<div id="container" class="no-panel">
  <div id="panel">
    <div style="height: 120px">
      Some Panel Contents
    </div>
  </div>
  <div id="contents">
    <div style="height: 800px">
      Some Contents Contents
    </div>
  </div>
</div>

https://jsfiddle.net/0kjojak9/

x轴的Highcharts系列（列）名称

1 个答案: