Google 가상화 막대 차트에서 도구 설명(텍스트 및 형식)을 사용자 지정하는 방법

Google 가상화 막대 차트에서 도구 설명(텍스트 및 형식)을 사용자 지정하는 방법

Google 시각화 막대 차트를 사용하고 있으며 막대를 클릭할 때 나타나는 도구 설명 텍스트와 형식을 사용자 지정하거나 변경하려고 합니다.

저는 문서를 다 읽었지만 이것을 구현할 방법을 찾지 못했습니다.당신은 알고 있습니까?

1. 그게 가능할까요?
2. 그렇다면 코드 예제를 몇 가지 제공해 주시겠습니까?

다을사여용번형변수있다습니경할식을 할 수 .google.visualization.NumberFormat학생들

var formatter = new google.visualization.NumberFormat({
    fractionDigits: 0,
    prefix: '$'
});

formatter.format(data, 1); // Apply formatter to second column.

좀 더 하다면, 은,▁▁look,PatternFormat학생들

여기 API 참조가 있습니다.

도구 팁에서 원하는 항목에 대한 새 데이터 유형을 만듭니다.

var data = new google.visualization.DataTable();
data.addColumn('string', 'Game');
data.addColumn('number', 'Transactions');
data.addColumn({type:'string', role:'tooltip'}); // here is the tooltip line

이제 도구 설명에 원하는 정보를 데이터에 추가합니다.

['$FormatedWeekday', $SalesAll,'$ToolTip']
['$FormatedWeekday', $SalesAll,'$ToolTip']
['$FormatedWeekday', $SalesAll,'$ToolTip']

요금 팁의 기본 데이터가 모두 손실되므로 다시 패키지화해야 할 수 있습니다.

$ToolTip = ''.$FormatedWeekday.' \u000D\u000A '.$SalesAll.' \u000D\u000A '."Red Cross  Event";

"\u000D\u000A"가 라인 중단을 강제합니다.

저는 구글 파이 차트로 비슷한 일을 하려고 했습니다.원래 코드의 마우스를 사용하여 도구 설명에 레이블, 원시 번호 및 백분율이 표시되었습니다.

원래 코드는 다음과 같습니다.

data.setValue(0, 0, '크리스마스 트리');

data.setValue(0, 1, 410000000);

그리고 툴팁에는 "크리스마스 트리 410000000 4.4%"가 표시됩니다.

텍스트 형식을 지정하기 위해 코드에 줄을 추가했습니다.

data.setValue(0, 0, '크리스마스 트리');

data.setValue(0, 1, 410000000);

data.setFormatedValue(0, 1, "4억 1천만 달러");

그 결과는 "크리스마스 트리 4억 1천만 달러 4.4"라고 쓰인 툴팁이었습니다.%"

이것이 도움이 되길 바랍니다!

Google 차트는 html 도구 설명 라인 차트, 막대 차트 형식을 지원하지 않습니다.사용자:

google.visualization.events.addListener(chart, 'onmouseover', function(rowColumn){
                                myFunction();
                            });

myFunction()사용할 수 있습니다.popup자세한 정보를 표시합니다.

그것을 하는 아주 쉬운 방법이 있습니다, 당신은 단지 다음 중 하나를 사용하면 됩니다.Formatters데이터의 경우:

// Set chart options
var options = {
hAxis: {format: 'MMM dd, y'}
};

// Format the data
var formatter = new google.visualization.DateFormat({pattern:'EEEE, MMMM d, y'});
formatter.format(data,0);

// Instantiate and draw our chart, passing in some options.
var chart = new google.visualization.AreaChart(document.getElementById('visualization'));
chart.draw(data, options);

마우스 오버를 할 때만 데이터 형식이 표시되므로 축 형식을 데이터 형식과 다르게 지정할 수 있습니다.

텍스트를 사용자 할 수 있는 한 열을 하여 툴팁 를 사용자 정의할 수 것 .role: 'tooltip': https://developers.google.com/chart/interactive/docs/customizing_tooltip_content

또 다른 방법은 데이터에 도구 설명으로 사용할 다른 열을 추가하는 것입니다.

function drawVisualization() {
    data = new google.visualization.DataTable()
    data.addColumn('string', 'Date');
    data.addColumn('number');
    data.addColumn({type:'string',role:'tooltip'});
    data.addRow();
    base = 10;
    data.setValue(0, 0, 'Datapoint1');
    data.setValue(0, 1, base++);
    data.setValue(0, 2, " This is my tooltip1 ");

    data.addRow();
    data.setValue(1, 0, 'Datapoint2');
    data.setValue(1, 1, base++);
    data.setValue(1, 2, "This is my second tooltip2");

    // Draw the chart.
    var chart = new google.visualization.BarChart(document.getElementById('visualization'));
    chart.draw(data, {legend:'none', width:600, height:400});
}

참고로, 모두:

Google은 2012년 9월에 맞춤형 HTML/CSS 툴팁을 추가했습니다. https://google-developers.appspot.com/chart/interactive/docs/customizing_tooltip_content

저도 같은 옵션을 찾고 있었습니다.직접적인 방법은 없는 것 같습니다.그러나 SelectHandler를 사용하여 기본 툴팁을 비활성화하고 자체 버전을 팝업할 수 있습니다.더 나은/직접적인 방법을 찾으셨다면 알려주시기 바랍니다.감사해요.

내가 그것을 비활성화하는 유일한 방법은 호버 핸들러의 DOM을 통과하는 것이었습니다(어쨌든 원형 차트의 경우).

$(pie.Ac.firstElementChild.contentDocument.childNodes[0].childNodes[2].childNodes[1].firstChild.childNodes[2].remove();

그것은 끔찍하고 구글이 존재하는 구조를 유지해야 하는 대상입니다.더 좋은 방법이 있습니까?

DataTable 역할 및 툴팁 예: https://developers.google.com/chart/interactive/docs/roles

label: 'Year',   'Sales',         null,   'Expenses',         null
`role: domain,     data,       tooltip,         data,      tooltip`
     '2004',       1000,    '1M$ sales,          400,    '$0.4M expenses
                       in 2004'                     in 2004'
     '2005',       1170, '1.17M$ sales,          460,    '$0.46M expenses
                        in 2005'                    in 2005'
     '2006',        660,  '.66M$ sales,         1120,    '$1.12M expenses
                        in 2006'                    in 2006'
     '2007',       1030, '1.03M$ sales,          540,    '$0.54M expenses
                        in 2007'                    in 2007'

null 레이블은 각각 '판매' 및 '비용'에 대한 도구 설명으로 사용됩니다.

언급URL : https://stackoverflow.com/questions/2068593/how-to-customize-tooltipstext-and-format-in-google-vizualization-bar-charts