chart.js : y 축의 특정 눈금 숨기기 및 모든 x 축 격자 선 숨기기

이네스

편집하다

나는 charts.js 라이브러리를 사용하고 있으며 내 y 축에서 특정 눈금을 숨길 수 있는지 알고 싶었습니다. 예를 들어 눈금의 min : 0 및 max : 100을 정의했으며 모든 값을 10의 배수로 표시했습니다. 0에서 100까지,하지만 0, 50 e 100 만 표시하고 싶습니다. (해결됨)

또 다른 문제는 모든 x 축의 격자 선을 제거하고 싶었지만 "gridLines.display : false"메서드는 차트 시작 부분의 첫 번째 세로선을 숨기지 않고 나머지는 숨 깁니다.

이것이 내가 원하는 모습입니다 : http://i.stack.imgur.com/GryIo.png

스크립트

        var humdays = document.getElementById("charthumdays");
        var humdaysChart = new Chart(humdays, {
        type: 'bar',
        data: {
            labels: ["15 mar", "16 mar", "17 mar", "18 mar", "19 mar", "20 mar", "21 mar"],
            datasets: [{
                label: "humidity",                
                data: [60, 20, 30, 50, 60, 80, 90],
                backgroundColor: "#D9B090",
                hoverBackgroundColor: 'rgba(217,176,144,0.8)'


            }]
        },
        options: {

            scales: {

               xAxes : [{


                    gridLines : {
                         display : false
                    }

               }],

                yAxes: [{

                    ticks: {
                        min:0,
                        max:100

                    }
                }]
            }
        }
    });

    humdaysChart.options.legend.display = false;
알렉스 바반

스케일 / yAxes에 afterBuildTicks 옵션 사용

yAxes: [{

  ticks: {
    min: 0,
    max: 100

  },
  afterBuildTicks: function(humdaysChart) {    
    humdaysChart.ticks = [];
    humdaysChart.ticks.push(0);
    humdaysChart.ticks.push(50);
    humdaysChart.ticks.push(100);    
  }
}]

또는 'stepSize' 를 사용할 수도 있습니다.

   yAxes: [{

        ticks: {
            min:0,
            max:100,
            stepSize:50

        }
    }]

http://jsfiddle.net/Lehuga5o/

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

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

에서 수정
0

몇 마디 만하겠습니다

0리뷰
로그인참여 후 검토

관련 기사

분류에서Dev

Shield UI Chart의 X 축 눈금 숨기기

분류에서Dev

jqplot의 라인 차트에서 y 축의 눈금 숨기기

분류에서Dev

음수 인 y 축 눈금 값 숨기기

분류에서Dev

y 축과 첫 번째 x 축 값 사이의 간격 늘리기 chart.js

분류에서Dev

x 축 및 y 축 눈금 레이블에 대한 다양한 글꼴 크기

분류에서Dev

chart.js는 차트 영역 내부에 격자 선을 숨기지 만 y 축 테두리는 유지합니다.

분류에서Dev

dc.js 차트 x 축 숨기기

분류에서Dev

openpyxl-x 및 y 축 눈금 증가

분류에서Dev

차트의 X 축 지점 0에서 격자 선 / 간격 가져 오기 (유연한 축 크기 조정)

분류에서Dev

기본 R의 날짜에 대한 장축 및 단축 눈금

분류에서Dev

C # 양식에서 곡선의 X 및 Y 축 그리기

분류에서Dev

사용자 지정 백분율 눈금을 표시하기 위해 C3 JS에서 막대 차트의 Y 축을 사용자 지정하는 방법

분류에서Dev

보조 Y 축이있는 Pandas 막대 그림 : 그림 아래에 격자 선 숨기기

분류에서Dev

Ubuntu Touch Terminal-키보드 숨기기 및 단축키 사용자 지정?

분류에서Dev

chart.js에서 x 축의 레이블을 어느 정도 기울이기

분류에서Dev

시리즈가 숨겨진 경우 Google 선 차트 X 축 크기 조정

분류에서Dev

X 축에서 분 값 숨기기

분류에서Dev

y 축을 숨기지 않고 계열 숨기기

분류에서Dev

y 축을 숨기지 않고 계열 숨기기

분류에서Dev

HighStocks-각 개별 y 축의 x 축 격자 선

분류에서Dev

보기 크기 조정시 눈금 및 격자 선 양을 늘리거나 줄입니다.

분류에서Dev

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

분류에서Dev

R의 각 y 축 변수에 특정한 상관 추세선 및 R 값 얻기

분류에서Dev

D3-3 개의 고정 된 y 축 눈금이있는 차트 만들기

분류에서Dev

메모장 ++ 접기 / 축소가 모든 것을 숨기나요?

분류에서Dev

대수 눈금으로 축의 모든 주요 10 ^ x 눈금 사이에 눈금을 10 번 설정합니다.

분류에서Dev

기본 x 및 y 축 대신 히트 맵 시각화의 모든 축에 열 이름이있는 Seaborn 히트 맵

분류에서Dev

Chart.js로 렌더링 된 꺾은 선형 차트의 y 축 최대 값 얻기

분류에서Dev

x 및 y 축 크기 조정 (geom_bar)

Related 관련 기사

  1. 1

    Shield UI Chart의 X 축 눈금 숨기기

  2. 2

    jqplot의 라인 차트에서 y 축의 눈금 숨기기

  3. 3

    음수 인 y 축 눈금 값 숨기기

  4. 4

    y 축과 첫 번째 x 축 값 사이의 간격 늘리기 chart.js

  5. 5

    x 축 및 y 축 눈금 레이블에 대한 다양한 글꼴 크기

  6. 6

    chart.js는 차트 영역 내부에 격자 선을 숨기지 만 y 축 테두리는 유지합니다.

  7. 7

    dc.js 차트 x 축 숨기기

  8. 8

    openpyxl-x 및 y 축 눈금 증가

  9. 9

    차트의 X 축 지점 0에서 격자 선 / 간격 가져 오기 (유연한 축 크기 조정)

  10. 10

    기본 R의 날짜에 대한 장축 및 단축 눈금

  11. 11

    C # 양식에서 곡선의 X 및 Y 축 그리기

  12. 12

    사용자 지정 백분율 눈금을 표시하기 위해 C3 JS에서 막대 차트의 Y 축을 사용자 지정하는 방법

  13. 13

    보조 Y 축이있는 Pandas 막대 그림 : 그림 아래에 격자 선 숨기기

  14. 14

    Ubuntu Touch Terminal-키보드 숨기기 및 단축키 사용자 지정?

  15. 15

    chart.js에서 x 축의 레이블을 어느 정도 기울이기

  16. 16

    시리즈가 숨겨진 경우 Google 선 차트 X 축 크기 조정

  17. 17

    X 축에서 분 값 숨기기

  18. 18

    y 축을 숨기지 않고 계열 숨기기

  19. 19

    y 축을 숨기지 않고 계열 숨기기

  20. 20

    HighStocks-각 개별 y 축의 x 축 격자 선

  21. 21

    보기 크기 조정시 눈금 및 격자 선 양을 늘리거나 줄입니다.

  22. 22

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

  23. 23

    R의 각 y 축 변수에 특정한 상관 추세선 및 R 값 얻기

  24. 24

    D3-3 개의 고정 된 y 축 눈금이있는 차트 만들기

  25. 25

    메모장 ++ 접기 / 축소가 모든 것을 숨기나요?

  26. 26

    대수 눈금으로 축의 모든 주요 10 ^ x 눈금 사이에 눈금을 10 번 설정합니다.

  27. 27

    기본 x 및 y 축 대신 히트 맵 시각화의 모든 축에 열 이름이있는 Seaborn 히트 맵

  28. 28

    Chart.js로 렌더링 된 꺾은 선형 차트의 y 축 최대 값 얻기

  29. 29

    x 및 y 축 크기 조정 (geom_bar)

뜨겁다태그

보관