jqPlot- 막대 차트 표시 문제 - 축 패딩 및 막대 간 간격

다음 코드를 사용하여 막대 차트 세트를 jqPlot에 표시합니다. X- 축에 대한 범위 값의 양쪽에 패딩이 없습니다jqPlot- 막대 차트 표시 문제 - 축 패딩 및 막대 간 간격

: 그러나, 나는이 문제를 얻고있다. 패드 속성은 효과가없는 것 같습니다.
막대 수가 많으면 막대가 서로 겹칩니다. barPadding 속성은 아무 효과가없는 것 같습니다.

이 링크는 Having problems with jqPlot bar chart입니다. 대답은 CategoryAxisRenderer을 사용하는 것이 좋습니다. 그러나 시계열 데이터를 사용하고 있으므로 DateAxisRenderer이 필요합니다.

도와주세요.

function plotBarGraph(data,myticks,series) 
{ 
    $("#placeholder").empty(); 
    $.jqplot('placeholder',data, 
      { 
       //stackSeries:true, 
        seriesDefaults:{ 
         renderer:$.jqplot.BarRenderer, 
         barMargin:1, 
         barPadding:0.5 
        }, 
        axes: 
         { 
         xaxis: 
          { 
          ticks:myticks, 
          tickInterval:10, 
          renderer:$.jqplot.DateAxisRenderer, 
          pad:2.5, 
          tickOptions: 
           { 
           formatString:'%d-%m-%y' 
           } 
          } 
         }, 
         legend: 
          { 
          show:true, 
          labels:series 
          }  
      }); 
}

출처

2012-06-12 aarthi ramaprasad

http://jsfiddle.net에서 작업 샘플을 작성하여 데이터를 실험 해 볼 수 있으므로 솔루션을 더 빠르게 사용할 수 있습니다. – Boro

이 경우 링크에서 언급 한 접근 방식을 사용하지 않으려는 경우 날짜 축의 최소/최대 값으로 재생할 수 있습니다.

플롯 그리기 후에도 틱을 설정하고 원하지 않는 것을 숨긴 곳에서 유용한 the approach to a similar sort of problem with padding을 찾을 수도 있습니다.

추가 도움이 필요하기 전에 문제를 제시하는 샘플을 제공해주십시오.

출처

2012-06-13 09:24:14 Boro

두 번째 문제에 대해서는 비슷한 문제가 발생했습니다. 나는 막대 그래프의 개수에 따라 차트의 크기를 넓히는 선택 문을 설정했습니다. 그런 다음 부모 div를 스크롤 할 수있게 만들었고 ("dataHolder"라고 함) 문제가 해결되었습니다.

 // set div properties depending on how many sets of data are in the 
     //array so the view is sized properly 
     $("#chartDiv").html("").css("width", "750px"); // chartDiv's default settings 
     $("#tabs-6").removeClass("dataHolder").css("width", "900px"); // parent Div's default settings 
     if (dataArray.length > 10) { 
      $("#chartDiv").css("width", "1600px"); 
      $("#tabs-6").addClass("dataHolder").css("width", "900px"); 
     } else if (dataArray.length > 6) { 
      $("#chartDiv").css("width", "1200px"); 
      $("#tabs-6").addClass("dataHolder").css("width", "900px"); 
     }

출처

2012-08-21 21:02:15 Nate

CategoryAxisRenderer에 Date 데이터를 사용하는 해결책을 찾았습니다. 다음과 같이 de xaxis를 구성해야합니다.

axes: { 
     xaxis: { 
      renderer: $.jqplot.CategoryAxisRenderer, 
      rendererOptions: { 
       tickRenderer: $.jqplot.DateTickRenderer, 
       tickOptions: { 
        formatter: $.jqplot.DateTickFormatter, 
        formatString:'%d/%m' 
       } 
      } 
     } 
    }

도움이되기를 바랍니다. ;)

출처

2013-06-19 14:51:43

jqPlot- 막대 차트 표시 문제 - 축 패딩 및 막대 간 간격

답변

관련 문제