도구 설명 및 색상이 포함 된 Google 차트

Question

색상을 만드는 방법을 보여주는 게시물을 보았지만 이해할 수 없었던 방법을 사용했으며 저에게는 다소 어려웠습니다. 메신저 쉽게이 방법을 사용하여 메신저하지만 그것은 툴팁 내부에서 작동하지 않았다.

google.charts.load('current', {'packages':['corechart','bar']}); 
    google.charts.setOnLoadCallback(drawChart); 

function drawChart() { 
var data = google.visualization.arrayToDataTable([ 
    ['Statistics', 'Amount', { role: 'style' } , { role: 'tooltip' }], 
    ['Categories', 5, '#D9534F' , "<img src='https://upload.wikimedia.org/wikipedia/commons/5/52/Xylocopa_virginica_male_face.jpg' width='40px' height = '40px'/>"], 
    ['Posts', 4, '#337AB7' , 'my tooltip'], 
    ['Comments', 8, '#5CB85C' ,'<div>fff</div>'], 
    ['Users', 3, '#F0AD4E' , '<b>hhh</b>'], 
    ]); 

var options = { 
    chart: { 
    title: 'Analysis', 
    tooltip: { isHtml: true}, 
    subtitle: '', 
    }, 
/* colors: ['#e0440e', '#e6693e', '#ec8f6e', '#f3b49f', '#f6c7b6'], // Another coloring method*/ 
    bars: 'horizontal' // Required for Material Bar Charts. 
}; 

var chart = new google.visualization.BarChart(document.getElementById('barchart_material')); 

chart.draw(data, options); 
} 

Js Fiddle here

덕분에, 누군가가 :) 내가 편집하고 votingdown 전에 무언가를 추가 할 수있는 질문이있는 경우 희망. 첫째

Answer 1

는 ... 클래식 및 재료 차트의 차이를 이해할 필요가

클래식 = google.visualization.BarChart-packages: ['corechart']

재료 = google.charts.Bar - packages: ['bar']

재질 개 차트 는 열 역할을 지원하지 않습니다 - 클래식 차트에서 HTML 툴팁에 필요한 두 가지가 다음

{role: 'style'} , {role: 'tooltip'}

---

...

1) 컬럼의 속성을해야합니다 존재 - {role: 'tooltip', p: {html: true}}

2) 차트 옵션 - 그러나 tooltip: { isHtml: true}

, 말아야 ... 단지

var options = { 
    title: 'Analysis', 
    tooltip: { isHtml: true} 
}; 

---

가 작업 조각 다음을 참조 (chart: {} 제거) 재료 차트위한 것입니다 chart 옵션 이내

google.charts.load('current', {packages: ['corechart']}); 
 
google.charts.setOnLoadCallback(drawChart); 
 

 
function drawChart() { 
 
    var data = google.visualization.arrayToDataTable([ 
 
    ['Statistics', 'Amount', {role: 'style'} , {role: 'tooltip', p: {html: true}}], 
 
    ['Categories', 5, '#D9534F' , "<img src='https://upload.wikimedia.org/wikipedia/commons/5/52/Xylocopa_virginica_male_face.jpg' width='40px' height = '40px'/>"], 
 
    ['Posts', 4, '#337AB7' , 'my tooltip'], 
 
    ['Comments', 8, '#5CB85C' ,'<div>fff</div>'], 
 
    ['Users', 3, '#F0AD4E' , '<b>hhh</b>'], 
 
    ]); 
 

 
    var options = { 
 
    title: 'Analysis', 
 
    tooltip: { isHtml: true} 
 
    }; 
 

 
    var chart = new google.visualization.BarChart(document.getElementById('barchart')); 
 
    chart.draw(data, options); 
 
}

<script src="https://www.gstatic.com/charts/loader.js"></script> 
 
<div id="barchart"></div>