Google 차트가 있습니다. 예 (Google 문서에서) :
<html>
<head>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
google.charts.load('current', {'packages':['corechart']});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Year', 'Sales', 'Expenses'],
['2004', 1000, 400],
['2005', 1170, 460],
['2006', 660, 1120],
['2007', 1030, 540]
]);
var options = {
title: 'Company Performance',
curveType: 'function',
legend: { position: 'bottom' }
};
var chart = new google.visualization.LineChart(document.getElementById('curve_chart'));
chart.draw(data, options);
}
</script>
</head>
<body>
<div id="curve_chart" style="width: 900px; height: 500px"></div>
</body>
</html>
전설 중 하나의 글꼴과 두께를 변경하고 싶습니다 Sales. 어떻게해야할지 모르겠어요. 쉬운 방법이 있습니까?
특정 라벨을 변경할 수있는 옵션은 없습니다.
각 레이블 유형에 대해 textStyle옵션이 있습니다.
그러나 이것은 해당 유형의 모든 레이블을 변경합니다.
예를 들어 모든 범례 레이블을 변경하려면->legend.textStyle
legend: {
textStyle: {
bold: true,
color: 'cyan',
fontSize: 18
}
}
그러나 차트 그리기가 끝나면 이벤트
중에 차트를 수동으로 변경할 수 있습니다 'ready'.
다음 작업 스 니펫을 참조하십시오. 여기에서 차트에 사용 된 레이블을 찾고
데이터 테이블의 열 제목과 비교
합니다. 찾은 경우 열 인덱스에 따라 스타일을 변경합니다.
google.charts.load('current', {
packages: ['corechart']
}).then(function () {
var data = google.visualization.arrayToDataTable([
['Year', 'Sales', 'Expenses'],
['2004', 1000, 400],
['2005', 1170, 460],
['2006', 660, 1120],
['2007', 1030, 540]
]);
var options = {
title: 'Company Performance',
curveType: 'function',
legend: {
position: 'bottom',
textStyle: {
bold: true,
color: 'cyan',
fontSize: 18
}
}
};
var chart = new google.visualization.LineChart(document.getElementById('curve_chart'));
// listen for ready event, must be assigned before calling draw
google.visualization.events.addListener(chart, 'ready', function () {
// get text elements from chart
var labels = chart.getContainer().getElementsByTagName('text');
// loop chart labels
Array.prototype.forEach.call(labels, function(label) {
// loop data table columns
for (var i = 1; i < data.getNumberOfColumns(); i++) {
// determine if label matches legend entry
if (label.textContent === data.getColumnLabel(i)) {
// determine column index
switch (i) {
// first series
case 1:
label.setAttribute('fill', 'magenta');
label.setAttribute('font-size', '24');
label.setAttribute('font-weight', 'normal');
break;
// second series
case 2:
label.setAttribute('fill', 'lime');
label.setAttribute('font-size', '12');
break;
}
}
}
});
});
chart.draw(data, options);
});<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="curve_chart"></div>이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.
침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제
몇 마디 만하겠습니다