[string-formatting] Chart.js-Y 축 서식 지정

Program / 글쓴이

내가 사용하고 Chart.js을 간단한 막대 그래프를 그릴 나는 그 Y가 같은 축 포맷해야

123456.05에서 123 456,05 $

사용 방법을 모르겠습니다 scaleLabel : "<%=value%>"

누군가 ” JS Micro-Templating “을 가리키는 것을 보았지만
우리의 scaleLabel옵션 과 함께 사용하는 방법에 대한 단서가 없습니다 .

누군가이 Y 축의 형식을 지정하는 방법을 알고 있으며 예를 들어 줄 수 있습니까?

답변

나는 같은 문제가 있었고 Chart.js 2.xx 에서는 접근 방식이 아래와 같이 약간 다르다고 생각합니다.

ticks: {
    callback: function(label, index, labels) {
        return label/1000+'k';
    }
}

자세한 내용

var options = {
    scales: {
        yAxes: [
            {
                ticks: {
                    callback: function(label, index, labels) {
                        return label/1000+'k';
                    }
                },
                scaleLabel: {
                    display: true,
                    labelString: '1k = 1000'
                }
            }
        ]
    }
}

답변

ChartJS 라이브러리의 문서화되지 않은 기능은 문자열 대신 함수를 전달하면 함수를 사용하여 y 축의 scaleLabel을 렌더링한다는 것입니다.

따라서 "<%= Number(value).toFixed(2).replace('.',',') + ' $' %>"작동 하는 동안 다음을 수행 할 수도 있습니다.

scaleLabel: function (valuePayload) {
    return Number(valuePayload.value).toFixed(2).replace('.',',') + '$';
}

원격으로 복잡한 작업을 수행하는 경우 대신이 작업을 수행하는 것이 좋습니다.

답변

scaleLabel : "<%= Number(value).toFixed(2).replace('.', ',') + ' $'%>"

답변

Nevercom이 말했듯이 scaleLable은 javascript를 포함해야하므로 y 값을 조작하려면 필요한 형식을 적용하십시오.

값은 문자열입니다. 

var options = {
    scaleLabel : "<%= value + ' + two = ' + (Number(value) + 2)   %>"
};

jsFiddle 예제

수동 y 스케일을 설정하려면 scaleOverride를 사용할 수 있습니다.

var options = {
    scaleLabel : "<%= value + ' + two = ' + (Number(value) + 2)   %>",

    scaleOverride: true,
    scaleSteps: 10,
    scaleStepWidth: 10,
    scaleStartValue: 0

};

jsFiddle 예제

답변

Chart.js 2.XX

이 게시물이 오래되었다는 것을 알고 있습니다. 하지만보다 유연한 솔루션을 찾고 있다면 여기에

var options = {
        scales: {
            yAxes: [{
                ticks: {
                    beginAtZero: true,
                    callback: function(label, index, labels) {
                        return Intl.NumberFormat().format(label);
                        // 1,350

                        return Intl.NumberFormat('hi', {
                            style: 'currency', currency: 'INR', minimumFractionDigits: 0,
                        }).format(label).replace(/^(\D+)/, '$1 ');
                        // ₹ 1,350

                        // return Intl.NumberFormat('hi', {
                            style: 'currency', currency: 'INR', currencyDisplay: 'symbol', minimumFractionDigits: 2
                        }).format(label).replace(/^(\D+)/, '$1 ');
                        // ₹ 1,350.00
                    }
                }
            }]
        }
    }

‘hi’는 힌디어입니다. 다른 로케일 인수 https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl#Locale_identification_and_negotiation#locales_argument 를 확인하십시오.

더 많은 통화 기호
https://www.currency-iso.org/en/home/tables/table-a1.html

답변

여기에서 Y 축 값을 포맷하는 방법에 대한 좋은 예를 찾을 수 있습니다.

또한 scaleLabel : "<%=value%>"언급 한 것을 사용할 수 있습니다. 기본적으로 <%=와 %>태그 사이의 모든 것이 자바 스크립트 코드로 처리 된다는 것을 의미합니다 (즉,if 통계 …).

답변