>

최근에 태그 캔버스로 HTML 그래픽을 렌더링하는 방법을 배웠습니다. 그러나 수동으로 데이터를 채우는 것은 약간 고통 스럽습니다 ... JavaScript 만 사용하여 Excel 스프레드 시트 에서이 데이터를 바로 가져올 수 있는지 알고 싶었습니다. 이것은 지금까지 내 코드입니다 ...

<div>
	<canvas class="line-chart"></canvas>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.min.js"></script>
	<script>
	var ctx = document.getElementsByClassName("line-chart");
	var dia = ["Dia 1", "Dia 2", "Dia 3", "Dia 4", "Dia 5", "Dia 6"]; //Seta os dias
	var real = [60,30,65,59,58,49]; //Seta os dados do grafico 1
	var meta = [30,45,62,47,55,11]; //Seta os dados do grafico 2
	//Type, data, options
	var chartGraph = new Chart (ctx, {
		type: 'line', //line, bar, radar, doughnut (pizza), polarArea
		data: {
				labels: dia,
				datasets: [{
					label: "OEE Real (%) ",
					data: real,
					borderWidth: 6,
					borderColor: 'rgba(146,242,42,0.85)',
					background: 'transparent',
				},
				{
					label: "OEE Meta (%)",
					data: meta,
					borderWidth: 6,
					borderColor: 'rgba(207,0,15,0.85)',
					background: 'transparent',
				},
			]},
		options: {
			title: {
				display: true,
				fontSize: 20,
				text: "ENCARTUCHAMENTO 05"
			},
			scales: {
            	yAxes: [{
                	ticks: {
                    	 max: 100,
                		 min: 0,
                	}
            	}]
        	},
		}
	});
	</script>
	</div>

  • 답변 # 1

    가장 쉬운 방법은 SheetJS (js-xlsx)를 활용하는 chartjs-plugin-datasource를 사용하는 것입니다.

    다음 엑셀 파일을 mydata.xlsx 로 저장하십시오  html 파일과 동일한 디렉토리에 있습니다.

    +--------------+-------+-------+-------+-------+-------+-------+
    |              | Dia 1 | Dia 2 | Dia 3 | Dia 4 | Dia 5 | Dia 6 |
    +--------------+-------+-------+-------+-------+-------+-------+
    | OEE Real (%) |    60 |    30 |    65 |    59 |    58 |    49 |
    +--------------+-------+-------+-------+-------+-------+-------+
    | OEE Meta (%) |    30 |    45 |    62 |    47 |    55 |    11 |
    +--------------+-------+-------+-------+-------+-------+-------+
    
    

    그런 다음 스크립트에서 지정하십시오.

    <script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/xlsx.full.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
    <div>
        <canvas class="line-chart"></canvas>
    </div>
    <script>
    var ctx = document.getElementsByClassName("line-chart");
    //Type, data, options
    var chartGraph = new Chart (ctx, {
        type: 'line',
        data: {
            datasets: [{
                borderWidth: 6,
                borderColor: 'rgba(146, 242, 42, 0.85)',
                fill: false
            }, {
                borderWidth: 6,
                borderColor: 'rgba(207, 0, 15, 0.85)',
                fill: false
            }
        ]},
        plugins: [ChartDataSource],
        options: {
            title: {
                display: true,
                fontSize: 20,
                text: 'ENCARTUCHAMENTO 05'
            },
            scales: {
                yAxes: [{
                    ticks: {
                        max: 100,
                        min: 0,
                    }
                }]
            },
            plugins: {
                datasource: {
                    url: 'mydata.xlsx'
                }
            }
        }
    });
    </script>
    
    

관련 자료

  • 이전 r - eval (predvars, data, env) 오류 - 'rm'개체를 찾을 수 없습니다
  • 다음 파일 이름의 초기 부분을 기준으로 Excel 파일을 이동하는 Powershell