JQPlot이 세로로 쌓인 막대와 가로 범례를 렌더링 할 수 없습니다.

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


    }); 

: 여기

코드입니다