flot-axislabels不工作

时间:2015-01-14 11:36:42

标签: jquery flot axis-labels

所以我尝试使用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>

1 个答案:

答案 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'
    }]
            });