! 제품 버전을 정확하게 입력해 주세요.
제품 버전이 정확하게 기재되어 있지 않은 경우,
최신 버전을 기준으로 안내 드리므로
더욱 빠르고 명확한 안내를 위해
제품 버전을 정확하게 입력해 주세요!

차트 X축 시작 부분의 공백 > Q&A | 토론

본문 바로가기

SpreadJS

Q&A | 토론

PureJS 차트 X축 시작 부분의 공백

페이지 정보

작성자 DOKIM 작성일 2023-05-03 13:30 조회 1,153회 댓글 0건
제품 버전 : 16
컨트롤 이름 : 차트

본문

안녕하세요.

차트를 그리는데 궁금한 점이 있어서 질문을 드립니다.

아래 사진의 X축의 첫 데이터와 (붉은색 동그라미 위치에) 공백이 있는데,

이 부분을 없애는 옵션이 있는지 궁금합니다.



 

  • 페이스북으로 공유
  • 트위터로  공유
  • 링크 복사
  • 카카오톡으로 보내기

댓글목록

등록된 댓글이 없습니다.

4 답변

PureJS Re: 차트 X축 시작 부분의 공백

추천0 이 글을 추천하셨습니다 비추천0

페이지 정보

작성자 GCK루카스 작성일 2023-05-08 16:45 댓글 4건

본문

안녕하세요 그레이프시티입니다.


primaryCategory, primaryValue를 이용하여 축의 최솟값을 설정하여 해당 부분을 없앨 수 있습니다.

아래 샘플을 참고하여 주시기 바랍니다.


감사합니다.

그레이프시티 드림

댓글목록

DOKIM님의 댓글

DOKIM 작성일

안녕하세요, 차트에서 min/max를 Date로 설정하면 X축에 날짜포맷이 적용되지 않는데, 이유가 궁금합니다.

====================================

window.onload = function () {
  let workbook = new GC.Spread.Sheets.Workbook(document.getElementById("ss"),{sheetCount:2});
  let sheet = workbook.getActiveSheet();
  var dataArray = [
    ["Month", 'Fund Income', 'Stock Income', 'Bank Interest Income'],
    [new Date(2000,1,1), 100, 2, 9],
    [new Date(2000,1,2), -96, 15, 2],
    [new Date(2000,1,3), 53, 88, 8],
    [new Date(2000,1,4), -15, 150, 1],
    [new Date(2000,1,5), 77, -52, 3],
    [new Date(2000,1,6), 20, 66, 6],
  ];
  sheet.setArray(0, 0, dataArray);
  //add chart
  var Charts = GC.Spread.Sheets.Charts;
  var xyScatterChart = sheet.charts.add('xyScatterChart', GC.Spread.Sheets.Charts.ChartType.xyScatterSmooth, 100, 50, 400, 350, 'A1:D7');
  var axes1 = xyScatterChart.axes();
  var xyScatterChartTitle = xyScatterChart.title();
  xyScatterChartTitle.text = "First Half Financial Income";
  xyScatterChart.title(xyScatterChartTitle);
  axes1.primaryCategory.crossPoint = 3;
  //축 최소값 설정
  axes1.primaryCategory.min = new Date(2000,1,1);
axes1.primaryCategory.format = "m\"월\"";  

axes1.primaryValue.min = -100;
  
  xyScatterChart.axes(axes1);
}

GCK루카스님의 댓글의 댓글

GCK루카스 작성일

안녕하세요 그레이프시티입니다.

primaryCategory.min 은 OADate 형식으로 입력되어야 합니다.
아래 링크와 코드를 참고하여 주시기 바랍니다.

axes1.primaryCategory.min = Math.round((new Date(2000, 1, 3) - new Date(1899, 11, 30)) / (24 * 60 * 60 * 1000));

https://gist.github.com/cilerler/3993569

감사합니다.
그레이프시티 드림

DOKIM님의 댓글의 댓글

DOKIM 작성일

이 방법으로는 차트가 그려지지 않습니다.

window.onload = function () {
    var spread = new GC.Spread.Sheets.Workbook(document.getElementById("ss"), {sheetCount: 1});

    var data = dataSource;
    var Charts = GC.Spread.Sheets.Charts;

    spread.suspendPaint();
    spread.options.tabStripRatio = 0.7;

    var sheet = spread.getSheet(0);    

    sheet.name('stockHLC');
    sheet.setArray(00, data);
    sheet.getRange(00621).formatter('yyyy-mm-dd');
    sheet.setColumnWidth(080);

    var chart = sheet.charts.add('stockHLC'Charts.ChartType.line, 40060615270);
    chart.series().add({
        chartType: Charts.ChartType.line,
        axisGroup: Charts.AxisGroup.primary,
        name: 'C1',
        xValues: 'A2:A62',
        yValues: 'C2:C62'
    });
    var axes = chart.axes();
    axes.primaryCategory.majorGridLine.visible = true;
    axes.primaryCategory.majorUnit = 2;
    axes.primaryCategory.min = new Date('2008-08-31');
    axes.primaryCategory.max = new Date('2008-10-30');
    //axes.primaryCategory.min = Math.round((new Date('2008-08-31') - new Date(1899, 11, 30)) / (24 * 60 * 60 * 1000));
    //axes.primaryCategory.max = Math.round((new Date('2008-10-30') - new Date(1899, 11, 30)) / (24 * 60 * 60 * 1000));
    axes.primaryCategory.format = "yy.m.d";
    axes.primaryCategory.labelAngle = -45;
    axes.primaryValue.majorGridLine.visible = false;
    chart.axes(axes);
    spread.resumePaint();
}

삭제된 댓글

DOKIM 작성일

삭제된 댓글 입니다.

PureJS Re: 차트 X축 시작 부분의 공백

추천0 이 글을 추천하셨습니다 비추천0

페이지 정보

작성자 DOKIM 작성일 2023-05-17 14:49 댓글 1건

본문

안녕하세요. 

X축이 숫자일 경우에는 min/max가 적용이 되는데, 날짜인 경우에는 제일 처음에 공백이 생기네요. 

그리고, 추가 질문이 있습니다. 1개월 또는 3개월 단위로 majorGridLine을 긋고 싶을 때 majorUnit 값을 어떻게 설정하면 될까요?

감사합니다.



<소스>

window.onload = function () {

    var spread = new GC.Spread.Sheets.Workbook(document.getElementById("ss"), {sheetCount: 1});

        

    var data = dataSource;

    var Charts = GC.Spread.Sheets.Charts;


    spread.suspendPaint();

    spread.options.tabStripRatio = 0.7;

    

    var sheet = spread.getSheet(0);    

    

    sheet.name('stockHLC');

    sheet.setArray(0, 0, data);

    sheet.getRange(0, 0, 62, 1).formatter('yyyy-mm-dd');

    sheet.setColumnWidth(0, 80);

    

    var chart = sheet.charts.add('stockHLC', Charts.ChartType.line, 400, 60, 615, 270);

    chart.series().add({

        chartType: Charts.ChartType.line,

        axisGroup: Charts.AxisGroup.primary,

        name: 'B1',

        xValues: 'A2:A62',

        yValues: 'B2:B62'

    });

    var axes = chart.axes();

    axes.primaryCategory.majorGridLine.visible = true;

    axes.primaryCategory.majorUnit = 2;

    axes.primaryCategory.min = new Date('2008-08-31');

    axes.primaryCategory.max = new Date('2008-10-30');

    axes.primaryCategory.format = "yy.m.d";

    axes.primaryCategory.labelAngle = -45;

    axes.primaryValue.majorGridLine.visible = false;

    chart.axes(axes);

    spread.resumePaint();

};



a93b34ebefc15000a045c3e6ef267ff2_1684302385_0404.png
<그림1. 캡쳐>

댓글목록

삭제된 댓글

DOKIM 작성일

삭제된 댓글 입니다.

PureJS Re: 차트 X축 시작 부분의 공백

추천0 이 글을 추천하셨습니다 비추천0

페이지 정보

작성자 GCK루카스 작성일 2023-05-18 15:43 댓글 1건

본문

안녕하세요 그레이프시티입니다.


majorGridLine 은 별도의 간격 설정이 불가능합니다. 

이는 엑셀에서 지원하지 않는 기능이기 때문에 SpreadJS 에서도 별도 지원하지 않습니다.

원하시는 답변을 드리지 못해 죄송합니다.


[프리미엄 회원 전환 안내]
라이선스를 보유하고 계신다면, 누구나 추가 비용 없이 그레이프시티 포럼 프리미엄 회원이 될 수 있습니다.
프리미엄 회원으로 전환 시, 기술 문의에 대하여 우선 지원 받으실 수 있습니다.
아래 링크를 통해 프리미엄 회원 전환 방법 및 혜택 안내를 살펴보시길 바랍니다.


감사합니다.

그레이프시티 드림

댓글목록

DOKIM님의 댓글

DOKIM 작성일

X축이 날짜인 경우에 제일 처음에 공백은 없앨 수 없는 건가요?

PureJS Re: 차트 X축 시작 부분의 공백

추천0 이 글을 추천하셨습니다 비추천0 채택채택

페이지 정보

작성자 GCK루카스 작성일 2023-05-30 10:45 댓글 1건

본문

안녕하세요 그레이프시티입니다.


아쉽게도 엑셀과 마찬가지로 차트가 축에서부터 시작하지 않기 때문에 말씀하신 공백을 제거하는 기능은 제공하고 있지 않습니다.

다만, 기존 축 자체를 제거하여 보기 좋게 만들 수 있습니다.

아래 샘플을 참고하여 주시기 바랍니다.



[프리미엄 회원 전환 안내]
라이선스를 보유하고 계신다면, 누구나 추가 비용 없이 그레이프시티 포럼 프리미엄 회원이 될 수 있습니다.
프리미엄 회원으로 전환 시, 기술 문의에 대하여 우선 지원 받으실 수 있습니다.
아래 링크를 통해 프리미엄 회원 전환 방법 및 혜택 안내를 살펴보시길 바랍니다.


감사합니다.

그레이프시티 드림

댓글목록

메시어스 홈페이지를 통해 제품에 대해서 더 자세히 알아 보세요!
홈페이지 바로가기
메시어스 홈페이지를 통해 제품에 대해서 더 자세히 알아 보세요!
홈페이지 바로가기
이메일 : sales-kor@mescius.com | 전화 : 1670-0583 | 경기도 과천시 과천대로 7길 33, 디테크타워 B동 1107호 메시어스(주) 대표자 : 허경명 | 사업자등록번호 : 123-84-00981 | 통신판매업신고번호 : 2013-경기안양-00331 ⓒ 2024 MESCIUS inc. All rights reserved.