Amcharts - 눈금선을 제거하지만 기본 x 및 y 축을 유지하는 방법

TheFrontEndDev

Amcharts4에서 격자선만 제거하고 x축 및 y축 기준선을 유지하려면 어떻게 해야 합니까? Vuejs와 함께 Amcharts를 사용하고 있습니다. 여기 차트 구성 요소의 코드

<template>
    <b-card>
        <div class="d-flex align-items-center justify-content-between">
            <h5>Real Time</h5>
        </div>
        <div class="real-time-graph mt-4" ref="chartdiv"></div>
    </b-card>
</template>

<script>
    import * as am4core from "@amcharts/amcharts4/core";
    import * as am4charts from "@amcharts/amcharts4/charts";
    import am4themes_animated from "@amcharts/amcharts4/themes/animated";

    am4core.useTheme(am4themes_animated);

    export default {
        name: "main-details",
        mounted() {
           let chart = am4core.create(this.$refs.chartdiv, am4charts.XYChart);

            chart.data = [{
                "date": "2020-01-01",
                "value1": 180,
                }, {
                "date": "2020-01-08",
                "value1": 300,
                }, {
                "date": "2020-01-15",
                "value1": 160,
                }, {
                "date": "2020-01-22",
                "value1": 650,
                }, {
                "date": "2020-01-29",
                "value1": 220,
                }, {
                "date": "2020-02-05",
                "value1": 440,
                }, {
                "date": "2020-02-12",
                "value1": 550,
                }, {
                "date": "2020-02-19",
                "value1": 290,
                }, {
                "date": "2020-02-26",
                "value1": 440,
                }, {
                "date": "2020-03-04",
                "value1": 150,
                }, {
                "date": "2020-03-11",
                "value1": 430,
                }];

            // Set input format for the dates
            chart.dateFormatter.inputDateFormat = "yyyy-MM-dd";
            chart.numberFormatter.numberFormat = '#,###w';

            // Create axes
            var dateAxis = chart.xAxes.push(new am4charts.DateAxis());
            dateAxis.renderer.minGridDistance = 50;
            dateAxis.renderer.grid.template.disabled = true; 
            dateAxis.renderer.line.disabled = false;
            dateAxis.renderer.ticks.template.disabled = true;
            dateAxis.renderer.labels.template.fill = am4core.color("#C3CDDD");
          
            var valueAxis = chart.yAxes.push(new am4charts.ValueAxis());
            valueAxis.renderer.grid.template.disabled = true; 
            valueAxis.renderer.labels.template.fill = am4core.color("#C3CDDD");

            // Create series
            var series1 = chart.series.push(new am4charts.StepLineSeries());
            series1.dataFields.valueY = "value1";
            series1.dataFields.dateX = "date";
            series1.strokeWidth = 2;
            series1.stroke = "#3AB7FD";

            series1.fillOpacity = 1;
            var gradient1 = new am4core.LinearGradient();
            gradient1.addColor(chart.colors.getIndex(0), 0.2);
            gradient1.addColor(chart.colors.getIndex(0), 0);
            gradient1.rotation = 90;
            series1.fill = gradient1;
        
        }
    }
</script>

다음을 사용하여 축과 눈금선이 모두 제거됩니다.

dateAxis.renderer.ticks.template.disabled = true;
valueAxis.renderer.grid.template.disabled = true; 

위 코드의 출력 그래프입니다. x 및 y 기본 축을 모두 표시하고 눈금선만 제거해야 합니다.

xorspark

당신은 설정할 수 있습니다 축 렌더러의 라인 객체의 축 라인을 보여주기 위해 0이 아닌 값으로 strokeOpacity는을 :

dateAxis.renderer.line.strokeOpacity = 1;
valueAxis.renderer.line.strokeOpacity = 1;

데모:

let chart = am4core.create("chartdiv", am4charts.XYChart);

chart.data = [{
  "date": "2020-01-01",
  "value1": 180,
}, {
  "date": "2020-01-08",
  "value1": 300,
}, {
  "date": "2020-01-15",
  "value1": 160,
}, {
  "date": "2020-01-22",
  "value1": 650,
}, {
  "date": "2020-01-29",
  "value1": 220,
}, {
  "date": "2020-02-05",
  "value1": 440,
}, {
  "date": "2020-02-12",
  "value1": 550,
}, {
  "date": "2020-02-19",
  "value1": 290,
}, {
  "date": "2020-02-26",
  "value1": 440,
}, {
  "date": "2020-03-04",
  "value1": 150,
}, {
  "date": "2020-03-11",
  "value1": 430,
}];

// Set input format for the dates
chart.dateFormatter.inputDateFormat = "yyyy-MM-dd";
chart.numberFormatter.numberFormat = '#,###w';

// Create axes
var dateAxis = chart.xAxes.push(new am4charts.DateAxis());
dateAxis.renderer.minGridDistance = 50;
dateAxis.renderer.grid.template.disabled = true;
dateAxis.renderer.ticks.template.disabled = true;
dateAxis.renderer.labels.template.fill = am4core.color("#C3CDDD");
dateAxis.renderer.line.strokeOpacity = 1;
var valueAxis = chart.yAxes.push(new am4charts.ValueAxis());
valueAxis.renderer.grid.template.disabled = true;
valueAxis.renderer.labels.template.fill = am4core.color("#C3CDDD");
valueAxis.renderer.line.strokeOpacity = 1;

// Create series
var series1 = chart.series.push(new am4charts.StepLineSeries());
series1.dataFields.valueY = "value1";
series1.dataFields.dateX = "date";
series1.strokeWidth = 2;
series1.stroke = "#3AB7FD";

series1.fillOpacity = 1;
var gradient1 = new am4core.LinearGradient();
gradient1.addColor(chart.colors.getIndex(0), 0.2);
gradient1.addColor(chart.colors.getIndex(0), 0);
gradient1.rotation = 90;
series1.fill = gradient1;
<script type="text/javascript" src="https://cdn.amcharts.com/lib/4/core.js"></script>
<script type="text/javascript" src="https://cdn.amcharts.com/lib/4/charts.js"></script>
<div id="chartdiv" style="width: 100%; height: 98vh"></div>

이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.

침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제

에서 수정
0

몇 마디 만하겠습니다

0리뷰
로그인참여 후 검토

관련 기사

눈금 및 눈금 레이블에 영향을주지 않고 축 선만 제거

x 축 눈금 레이블을 첨자하는 방법

차트에 보조 축을 사용하면 x 축 및 기본 y 축 문제가 발생합니다 (Excel).

x 축 amcharts의 레이블을 비활성화하는 방법

Python에서 데이터 프레임을 플로팅하기 위해 x 및 y 축을 지정하는 방법

보조 y 축 눈금을 기본 x 축의 stripplot과 정렬

ggplot2 Geom을 확장하여 x 및 y 축의 기본 "패딩"변경

Amcharts X 축을 편집하는 방법?

통화로 보케 x 축 눈금을 포맷하는 방법

Plotly : x 축의 주요 눈금 / 격자 선 값을 설정하는 방법은 무엇입니까?

x 및 y 축에 소행성을 만드는 방법

승리 x 축 눈금 레이블을 제어하는 방법

Python matplotlib에서 범주 형 변수로 x 축 및 y 축 눈금을 변경하는 방법은 무엇입니까?

librosa.display.specshow를 사용하여 만든 플롯에서 Y 축 레이블, 눈금 및 축 레이블을 제거하는 방법

Pandas에서 X 또는 Y 축의 축 눈금 레이블을 사용자 지정하는 방법은 무엇입니까?

x 및 y 축에서 눈금 사이의 거리를 지정하는 방법은 무엇입니까?

Matplotlib 및 Seaborn에서 x 축 눈금 표시 (눈금 레이블 아님)와 x 축 사이에 패딩을 추가하는 방법

Matplotlib : 그래프 뒤에 그리드 선을 유지하지만 위에있는 y 및 x 축

jfreecharts에서 x 및 y 축 선을 조정하는 방법

R 비 순차적 x 축 눈금에 레이블을 지정하는 방법

nvd3에서 Y 축에 사용자 지정 눈금 및 레이블을 설정하는 방법

선 그래프가 첫 번째 x 축 눈금에서 시작하지 않을 때 x 축 눈금 사이의 간격을 일정하게 유지하는 방법

눈금선을 유지하면서 GridPane을 지우는 방법

로그 스케일링된 쌍 x 및 y축에서 작은 눈금의 형식을 지정하는 방법은 무엇입니까?

보조 y축의 레이블과 눈금을 유지하면서 기본 y축 레이블 및 눈금 제거

Seaborn 산점도에 x 및 y 축 선을 추가하는 방법

Y축의 눈금을 제거하지만 Altair 차트에서 레이블을 유지하는 방법

플롯 그래프에서 X 및 Y 축 선을 사라지게 하는 방법

Makie 히트맵에서 사용자 정의 x 및 y 눈금 값을 설정하는 방법

TOP 리스트

  1. 1

    어떻게 아무리 "나쁜", ANY의 SSL 인증서와 HttpClient를 사용하지합니다

  2. 2

    SAP Java Connector (SAP JCO) SAP Funcion Module의 동적 매개 변수 및 값 목록

  3. 3

    자바, 레디 스, 탄성 검색, 몽고와 자동 완성

  4. 4

    ElasticSearch-노드 잠금을 가져 오지 못했습니다.

  5. 5

    Excel : 합계가 N보다 크거나 같은 상위 값 찾기

  6. 6

    rclone으로 원격 디렉토리의 모든 파일을 삭제하는 방법은 무엇입니까?

  7. 7

    Ubuntu는 GUI에서 암호로 사용자를 만듭니다.

  8. 8

    R-이중 항목 피벗 테이블 만들기

  9. 9

    PyCharm에서 갑자기 일부 메뉴 명령이 작동을 멈췄습니다.

  10. 10

    Cassandra에서 버전이 지정된 계층의 효율적인 모델링

  11. 11

    자바의 .txt 파일에서 2D 배열 읽기

  12. 12

    매개 변수에서 쿼리 객체를 선언하는 방법은 무엇입니까?

  13. 13

    cypress로 배열의 인덱스를 가져 오면 대신 "-1"이 반환됩니다.

  14. 14

    VBA-조건에 따라 자동으로 팝업되는 오류 메시지를 가질 수 있습니까?

  15. 15

    여러 양식을 사용하여 목록 상자 내에서 데이터 편집 문제

  16. 16

    jfreecharts에서 x 및 y 축 선을 조정하는 방법

  17. 17

    스크립트에 의해 SSH를 통해 자동으로 X 프로세스 전달

  18. 18

    그룹 별 중복 관측치를 축소하면서 테이블 전치

  19. 19

    마우스 휠 JQuery 이벤트 핸들러에 대한 방향 가져 오기

  20. 20

    버튼을 클릭하기 위해 pywinauto를 가져올 수 없습니다.

  21. 21

    randomUUID ()를 사용하여 생성 된 UUID의 길이를 줄이는 방법

뜨겁다태그

보관