所以我尝试使用https://github.com/markrcote/flot-axislabels
中的插件将轴标签附加到我的图表中$.ajax({
type: "POST",
url: "includes/getjson.php",
data: $('.ids:checked').serialize(),
dataType: "json",
success: function(datasets){
$.each(datasets, function(index,value) {
var element = "<div class='flot-chart'><div class='flot-chart-content' id='placeholder_"+index+"'></div></div>";
$('#graphbody').append(element);
var options = {
series: {
lines: { show: true },
points: { show: true }
},
xaxis: {
mode: "time",
timeformat: "%H:%M:%S",
twelveHourClock: false,
timezone: "browser",
axisLabel: 'X',
axisLabelUseCanvas: true,
axisLabelFontSizePixels: 12,
axisLabelFontFamily: 'Verdana, Arial, Helvetica, Tahoma, sans-serif',
axisLabelPadding: 5
},
yaxis: {
axisLabel: 'Sin(X)',
axisLabelUseCanvas: true,
axisLabelFontSizePixels: 12,
axisLabelFontFamily: 'Verdana, Arial, Helvetica, Tahoma, sans-serif',
axisLabelPadding: 5
},
grid: {
hoverable: true,
clickable: true
}
};
//plotting the rececived data
$.plot('#placeholder_'+index, [value['raw']],options);
我直接从flot-site尝试了一个基本的图表并且它有效,但我似乎无法找到导致标签无效的缺失部分。
我已经包含以下内容:
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script language="javascript" type="text/javascript" src="js/plugins/flot/jquery.flot.js"></script>
<script language="javascript" type="text/javascript" src="js/plugins/flot/jquery.flot.axislabels.js"></script>
答案 0 :(得分:1)
你不应该使用“xaxes”和“yaxes”而不是“xaxis”和“yaxis”吗?此外,我没有看到axisLabels:{show:true},如下例所示。 Example Fiddle
$.plot($("#placeholder"),
dataSet, {xaxes: [{
axisLabel: 'This is the X-Axis'
}],
yaxes: [{
axisLabel: 'Left Y Axis'
},
{
position: "right",
axisLabel: 'Right Y Axis'
}]
});