2016-08-22 4 views
0

차트 형식으로 데이터를 표시하는 데 canvasjs을 사용하고 있습니다. 모든 데이터가 덜있을 때 날짜가 옆에 잘 작동하는 것은캔버스 js 날짜가 x 축에서 반복됩니다.

입니다.

여기에 내 JS

var chartResponses = new CanvasJS.Chart("chartResponses", { 
     animationEnabled: true, 
     toolTip: { 
      enabled: true, 
      animationEnabled: true, 
      fontColor: "#F9BF97", 
     }, 
     axisX: { 
      titleFontFamily: "verdana", 
      valueFormatString: "D/M/YYYY", 
      tickThickness: 0, 
      lineThickness: 1, 
      gridThickness: 0, 
      gridColor: "#f2f6f7", 
      lineColor: "#f2f6f7", 
      labelFontColor: "#8fa2aa", 
      labelFontSize: 12, 
      intervalType: "day", 

     }, 
     axisY: { 
      titleFontFamily: "verdana", 
      valueFormatString: "0", 
      tickThickness: 0, 
      lineThickness: 0, 
      gridThickness: 1, 
      gridColor: "#f2f6f7", 
      lineColor: "#f2f6f7", 
      labelFontColor: "#8fa2aa", 
      labelFontSize: 12 
     }, 
     data: [{ 
       type: "splineArea", 
       showInLegend: true, 
       markerSize: 0, 
       name: "", 
       color: "#F9BF97", 
       dataPoints: allResponses 
      }], 
    }); 

    chartResponses.render(); 

이고 내가 interval: 1에 간격을 설정하여 시도 두 날짜

enter image description here

이 때 차트를 표시하는 방법이. 이 경우 데이터 차트가 적게 작동하지만 더 많은 데이터 날짜가있을 때 아래 이미지와 같이 겹쳐서 시작됩니다.

enter image description here

하지만 interval: 1을 제거 할 때 다음 그래서이 문제를 해결하기 위해 어떤 방법

enter image description here

잘가 표시됩니다.

+0

바이올린을 추가 할 수 있습니까? 하드 코드 된 데이터 포인트 –

+0

'jsfiddle'은 http://canvasjs.com/assets/script/canvasjs.min.js를 차단합니다. 그래서 만들 수 없습니다. http://jsfiddle.net/hb5KU/11/을 시도하고'type : "splineArea",'를 변경하고 더 많은 날짜 기록을 만들고 – urfusion

답변

1

더 많은 데이터가 있거나 주간이나 월별로 intervalType 속성을 변경하면 interval 속성을 5 이상으로 변경해야합니다. 이 업데이트 된 바이올린에 나와 있습니다. jsfiddle.net/hb5KU/66/

응답 데이터 길이에 따라 차트를 렌더링하기 전에 나중에 추가 할 수 있습니다.

+0

@urfusion을 확인하고 싶다면 동적으로 간격을 변경하려면 -http에서 아이디어를 얻을 수 있습니다 : //jsfiddle.net/canvasjs/8e98Lej8/ 여기 intrvalType 대신 간격을 설정할 수 있습니다. 초기 렌더링 (확대/축소 없음)의 경우 데이터에서 viewportMinimum 및 viewportMaximum을 찾아 적절하게 적용해야합니다. – Sanjoy