Как установить пользовательские метки по оси y

Question

Я использую API диаграммы Google (а не графическую схему Google), чтобы создать линейную диаграмму с датами на оси x (внизу) и цифрами по оси y (слева). Я хочу добавить ось r (справа) со строковыми метками.

Если я правильно понимаю следующую страницу, возможно, только имеют строки на главной оси (ось x для линейной диаграммы). Малые оси (оси y и r) только принимают непрерывные значения (например, числа), а не дискретные значения (например, строки ).

Customizing Axes

В Google Image Charts можно обойти эту проблему путем присвоения строковых данных в значение (скажем, от 0 до 100) и назначить пользовательские строковые метки на оси с помощью параметра chxl. Это особенно удобно, если данные равномерно распределены.

Я просмотрел ссылку API, но не могу найти ничего подобного при использовании API диаграммы Google.

Кто-нибудь знает, если это возможно?

С наилучшими пожеланиями, JP

Answer 1

Один HACK путь для достижения этой цели.

Как вы знаете, Google Chart использует SVG для рисования диаграмм. Итак, после рисования диаграммы элементы SVG вставлены в HTML DOM. Итак, используя jQuery, вы можете узнать элемент метки vAxis и изменить его текст.

Например, в моем случае мои значения vAxis имеют значения как [0, 1, 2, 3, 4]. Я хочу изменить его на [«IDLE», «PCH», «FACH», «DCH», «»] вместо номера.

Я основал элемент SVG для структуры DOM метки vAxis, используя инструмент проверки веб-элемента моего браузера.

Итак, я добавил код, как показано ниже, после диаграммы.

$('#busy_rrclogs svg text[text-anchor="end"]:contains("0")').text("IDLE"); 
$('#busy_rrclogs svg text[text-anchor="end"]:contains("1")').text("PCH"); 
$('#busy_rrclogs svg text[text-anchor="end"]:contains("2")').text("FACH"); 
$('#busy_rrclogs svg text[text-anchor="end"]:contains("3")').text("DCH"); 
$('#busy_rrclogs svg text[text-anchor="end"]:contains("4")').text(""); 

Я добавил свой график в элемент HTML div ниже, как вы можете видеть из приведенного выше селектора jQuery.

<div id="busy_rrclogs"> 
</div> 

Это может решить мои проблемы, хотя это своего рода взломать.

Answer 2

Этот хак работает до тех пор, пока Google не изменит api в будущем. Также он работает, пока вы не используете экспериментальную опцию «explorer». Если вы используете масштабирование, тогда диаграмма повторно отображается на каждом событии мыши и ваши значения исчезают. Очень печально то, что диаграмма api не подвергает ни масштабированию, ни повторному отображению событий. Существует только «готовое» событие, которое запускается только один раз после рисования графика. Кроме того, я заметил, что не могу рассчитывать, что значения yAxis отображаются, когда я предоставил их api. Если api решает, что эти строки слишком длинны, он отображает только подстроку с помощью всплывающей подсказки.

Итак, есть только один неуклюжий и один настоящий обходной путь, который я смог придумать. Я оставил неуклюжий, потому что она находится в соответствии с предыдущими записями

var chartDiv = document.getElementById ("chart"); 
chartDiv .addEventListener ("mousewheel", ProcessChart, false); 
//take care of "mousewheel" event browser compatibility!!! 

function ProcessChart() { 

    setTimeout(function() { 
     $("#chart svg text[text-anchor='end']:contains('$C$')").each(function() { 

      var $this = $(this); 
      var val = parseInt($this.text()); 
      var label = GetCommunicationLabel(val); 

      $this.text(label);       
     }); 
    }, 20); 
} 

Обратите внимание, что я использовал функцию SetTimeout для обработки этикеток. Диаграмма также отображается на событии mousewheel и без задержки вы пытаетесь обработать метки, которые еще не существуют.20 миллисекунд - это просто экспериментальное значение, и это зависит от того, как долго ваш график будет повторно отображаться на событии мыши. К сожалению, пользователь может обнаружить мигание при замене старых значений.

Наконец-то я нашел реальное решение.

vAxes: { 
0: { 
format: '#%', 
ticks: [0, 0.25, 0.5, 0.75, 1] 
//minValue: 0, 
//maxValue: 1, 
//title: batteryText, 
}, 
1: { 
ticks: [ { v: 0, f: GetCommunicationLabel(0) }, 
      { v: 1, f: GetCommunicationLabel(1) }, 
     { v: 2, f: GetCommunicationLabel(2) }, 
     { v: 3, f: GetCommunicationLabel(3) }, 
     { v: 4, f: GetCommunicationLabel(4) }], 
    // format: "#",      
textPosition: 'out' 
//minValue: 0, 
//maxValue: 3, 
//title: communicationText, 
} 
}, 

Answer 3

Самый простой подход все, чтобы добавить следующее к опциям графа:

vAxis: { ticks: [{ v: 0, f: 'Zero'}, {v: 1, f: 'One'}, {v: 2, f: 'Two'}]} 

В этом примере, я о том, что «ноль» должно отображаться вместо 0, «One "вместо 1 и т. д.