개요

지금까지 Yellowfinv9이 발표된 후 다양한 계기판의 맞춤형 제작을 검증했지만 이번에는 단추로 계기판에 표시된 보고서를 눌러 도표표시·표표시를 모두 전환하는 방법을 시도해 봤다.
삽입할 때도 이쪽을 참조하세요Yellowfin 대시보드가 포함된 외부 파일에서 차트 표시 전환

사전 준비

대시보드를 만들고 보고서를 적당히 배열한 다음 switch라는 단추를 대시보드에 놓으십시오.
이번에는 샘플 사전 설치 후 사용할 수 있는 SkiTeam 계기판으로 설명합니다.

보고서 이름 및 JS 태그 작성

내가 바로 코드를 아래에 표시하고 스위치 버튼을 눌렀을 때
표시되는 보고서의 이름이this로 변경됩니다.apis.canvas.단지 select에서 각각의display-type을 지정하고 검증하며 변경했습니다.
JStab.js

this.onRender = function () {
    // ここにコードを記述します。これは、イベントリスナーを設定するのに理想的な場所です
    let button = this.apis.canvas.select('switch');
    button.addEventListener('click', () => {
        let report1 = this.apis.canvas.select('Campaign Summary');
        let report2 = this.apis.canvas.select('Revenue by Campaign and Demographic');
        let report3 = this.apis.canvas.select('Agency Sales by Profitability');
        let report4 = this.apis.canvas.select('Profitability by Customer Age & Location Breakdown');
        let report5 = this.apis.canvas.select('Revenue by Media Category');
        let reports = [report1,report2,report3,report4,report5]
        reports.forEach(report => {
            let currentDisplay = report.getAttribute('display-type');
            if(currentDisplay === "CHART") {
                    currentDisplay = "REPORT";
            } else {
                    currentDisplay = "CHART";
            }
            report.setAttribute('display-type', currentDisplay);
        })
    });
};

감상

의외로 간단하게 실현되었다.
주의해야 할 것은 디스플레이-type에도 CANVAS 스타일이 있는 것 같습니다. 이때 else 부분을 추가하십시오.