개요

한 웹사이트에 Google Chart를 도입했는데, 곤란한 점에 배경색 때문에 문자가 매우 읽기 어려워요.
어떻게든 문자색을 바꾸려고 했는데, 코드만 태워도 재미없기 때문에 해결까지의 길을 남겨 둡니다.

현상

문자색을 바꾸지 않으면 문자가 매우 읽기 어렵습니다.

시도한 것 1. 공식 문서 읽기

어쨌든 공식 문서를 읽고 본다.

타임라인 | Charts | Google Developers
ぇぺぺrs. 오, ぇ. 코 m / 짱 rt / 인테라 c 치ゔ / cs / ぇ ry / 치메

그러나 데이터의 색(위의 이미지라면 노란색 부분)을 변경하는 옵션은 몇 가지 준비되어 있습니다만, 축의 문자에 관한 옵션은 보이지 않습니다.

다음.

시도한 내용 2. Google 검색

googlechart timeline 축에서 검색
https://www.google.com/search?q=googlechart+timeline+축

googlechart timeline 축 문자 색으로 검색
https://www.google.com/search?q=googlechart+timeline+축+문자색

평소와 같이 Google에서 찾아 보았습니다만 아무래도 그것 같은 것은 히트하지 않고.

여기서 1시간 이상 다리를 먹고 있습니다. . .

다음.

시도한 내용 3. 영어로 검색

영어 알레르기이므로, 효율이 나쁘다고는 생각하면서도 어쩔 수 없이 영어로 검색해 보는 것에.

google chart axis color timeline에서 검색
htps //w w. 오, ぇ. 이 m/세아 rch? q=오오gぇ+짱rt+아아s+코ぉr+치메ぃ네



무려 한 번에 그 흥미로운 기사를 발견.

Google Charts Change color of X-Axis Font for Timelines - Stack Overflow
h tps : // s t c ゔ ぇ rf ぉ w. 코 m / 쿠에 s 치온 s / 52156120 / 오오 ぇ - 짱 rts - 찬게 - ぉ r - 푸스 - ぃ

google.visualization.events.addListener(chart, 'ready', function () {
  var labels = container.getElementsByTagName('text');
  Array.prototype.forEach.call(labels, function(label) {
    if (label.getAttribute('text-anchor') === 'middle') {
      label.setAttribute('fill', '#ffffff');
    }
  });
});

의역하면
hAxis.textStyle 는 유효하지 않은 옵션이므로 사용할 수 없습니다.
하지만 ready 이벤트 발생 후 문자의 색을 다시 쓸 수 있어요.

라는 것.

위 사이트를 참고하여 코드를 추가해 보겠습니다.

결과

무사히 문자색을 바꿀 수 있었습니다.

요약

일본어로 검색하고 있던 시간은 무엇이었다고 생각하지 않을 수 없는 결과에・・・.

글쎄, 영어 검색이란 말이지만 단어 자체는 간단하며,
Google Chart: 서비스 이름
axis : 축
color : 색상
timeline : 차트 종류
그리고 이것만.

검색 워드에 일본어를 포함시켜 버리면 일본인 전용으로 개인화되어 버리기 때문에, 가능한 한 일본어를 포함하지 않는 편이 좋을 것 같네요.

이제 성실하게 영어를 공부합시다.