Question

我无法显示垂直堆叠条和水平图例。以下是代码：这是我第一次使用JQPlot。我没有得到我错的地方。

$(document).ready(function(){

  var line1 = [['Cup Holder Pinion Bob', 7], ['Generic Fog Lamp', 9], ['HDTV Receiver', 15], 
  ['8 Track Control Module', 12], [' Sludge Pump Fourier Modulator', 3], 
  ['Transcender/Spice Rack', 6], ['Hair Spray Danger Indicator', 18]];

  var line2 = [['Cup Holder Pinion Bob', 5], ['Generic Fog Lamp', 2], ['HDTV Receiver', 11], 
  ['8 Track Control Module', 10], [' Sludge Pump Fourier Modulator', 5], 
  ['Transcender/Spice Rack', 7], ['Hair Spray Danger Indicator', 2]];

  var line3 = [['Cup Holder Pinion Bob', 4], ['Generic Fog Lamp', 5], ['HDTV Receiver', 6],
  ['8 Track Control Module', 2], [' Sludge Pump Fourier Modulator', 5], 
  ['Transcender/Spice Rack', 6], ['Hair Spray Danger Indicator', 3]];

   var plot1 = $.jqplot('chart1', [line1,line2,line3], {
        // Tell the plot to stack the bars.
        stackSeries: true,
        seriesDefaults:{
            renderer:$.jqplot.BarRenderer,
            rendererOptions: {
                barPadding: 1,
                barWidth: 50,
                highlightMouseDown: true
            },
            pointLabels: {
                show: true
            }
        },
        axes: {
          xaxis: {
            pad: 1,
            renderer: $.jqplot.CategoryAxisRenderer

          }
        },
        highlighter: {
            sizeAdjust: 7.5
        },
        cursor: {
            show: true
        },
        legend: {
          show: false,
          location: 'ne',
          placement: 'inside'
        }
      });


   } );

Answer 1

我在字符串的x轴上使用了刻度线，并相应地更改了数据，从数据点中删除字符串。

以下是代码：

$(document).ready(function(){

  var line1 = [2, 5, 7, 9, 10, 23, 12];

  var line2 = [12, 6, 9, 9, 10, 23, 10];

  var line3 = [4, 8, 5, 10, 12, 18, 10];

  var cdi = [['2013-08-02',79.69],['2013-08-03',279.47],['2013-08-04',260.96],['2013-08-05',87.12],['2013-08-06',262.89],['2013-08-07',459.44],['2013-08-08',293.76]];
var fna = [['2013-08-02',212.18],['2013-08-03',61.47],['2013-08-04',238.26],['2013-08-05',125.06],['2013-08-06',184.34],['2013-08-07',140.03],['2013-08-08',495.81]];
var pix = [['2013-08-02',35.96],['2013-08-03',146.12],['2013-08-04',71.30],['2013-08-05',159.97],['2013-08-06',132.18],['2013-08-07',225.57],['2013-08-08',134.24]];


   var plot1 = $.jqplot('chart1', [line1,line2,line3], {
        // Tell the plot to stack the bars.
        stackSeries: true,
        seriesDefaults:{
            renderer:$.jqplot.BarRenderer,
            rendererOptions: {
                barPadding: 1,
                barWidth: 50,
                highlightMouseDown: true
            },
            pointLabels: {
                show: true
            }
        },
        axes: {
          xaxis: {
            pad: 1,
            renderer: $.jqplot.CategoryAxisRenderer,
            ticks: [['Cup Holder Pinion Bob'],['Generic Fog Lamp'],['HDTV Receiver'],['8 Track Control Module'], ['Sludge Pump Fourier Modulator'], ['Transcender/Spice Rack'], ['Hair Spray Danger Indicator']],
            tickRenderer: $.jqplot.CanvasAxisTickRenderer ,
            tickOptions: {
              angle: -30,
              fontSize: '10pt'
            }
          }
        },
        highlighter: {
            sizeAdjust: 7.5
        },
        cursor: {
            show: true
        },
        legend: {
          show: false,
          location: 'ne',
          placement: 'inside'
        }
      });


   } );

JQPlot无法渲染垂直堆叠条和水平图例

1 个答案: