我无法让我的pointLabels与我的jqplot一起工作

时间:2014-04-22 19:23:36

标签: javascript jquery jqplot

我有一个图表,其中使用jqplot绘制了4条不同的线条。我真的不想创建一个传奇,所以我想标记每一行。我看到有一个名为pointLabels的功能,但是我的标签没有显示。

//function for the line graph
    $(document).ready(function () {

        var yticks = ['Early Definition', 'Pre Alpha', 'Alpha', 'Beta', 'PV', 'Sprint To Launch'];

        var line1 = [[0, 1, null], [10.4, 2, null], [20.8, 3, null], [31.2, 4, null], [41.6, 5, 'FFD'], [52, 6, null]];
        var line2 = [[0, 1, null], [10.4, 1, null], [20.8, 2, null], [31.2, 3, null], [41.6, 4, 'Customer 1'], [52, 5, null]];
        var line3 = [[0, 1, null], [10.4, 2, null], [20.8, 4, null], [31.2, 5, null], [41.6, 6, 'Customer 1']];
        var line4 = [[0, 1, null], [10.4, 1, null], [20.8, 1, null], [31.2, 1, null], [41.6, 4, 'Customer 1'], [52, 5, null]];

        var plot3 = $.jqplot('linegraph', [line1, line2, line3, line4],
          {
              title: 'All Companies',
              // Series options are specified as an array of objects, one object
              // for each series.
              series: [
                  {
                      // Change our line width and use a diamond shaped marker.
                      lineWidth: 4,
                      markerOptions: { style: 'dimaond' },
                      //color: '#FFFFFF'
                  },
                  {
                      // Don't show a line, just show markers.
                      // Make the markers 7 pixels with an 'x' style
                      lineWidth: 4,
                      markerOptions: { size: 7, style: "x" }
                  },
                  {
                      // Use (open) circlular markers.
                      lineWidth: 4,
                      markerOptions: { style: "filledCircle" }
                  },
                  {
                      // Use a thicker, 5 pixel line and 10 pixel
                      // filled square markers.
                      lineWidth: 4,
                      markerOptions: { style: "filledSquare", size: 10 }
                  },
                  {
                      pointLabels: { show: true, location: 's', ypadding: 3 }
                  },
              ],

              axes: {
                  xaxis: {
                      renderer: $.jqplot.DateAxisRenderer,
                      label: 'Work Weeks',
                      max: 55,
                      min: 0,
                      tickOptions: {
                          formatString: '%.0f',
                      },
                  },
                  yaxis: {
                      label: 'Phases',
                      renderer: $.jqplot.CategoryAxisRenderer,
                      ticks: yticks
                  }
              },
          }
        );

    });

我已经确定我也包含了pointLabels的脚本:

<script type="text/javascript" src="plugins/jqplot.pointLabels.js"></script>

1 个答案:

答案 0 :(得分:1)

您应该将点标签选项移到系列数组之外的seriesDefaults部分:

seriesDefaults: {
    pointLabels: { show: true, location: 's', ypadding: 3 }
}

此处更新了小提琴: http://jsfiddle.net/R6sFn/3/