Как установить пользовательские метки на оси Y - PullRequest
Новая
       24

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

5 голосов
/ 17 марта 2012

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

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

Настройка осей

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

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

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

С уважением, JP

Ответы [ 3 ]

6 голосов
/ 14 мая 2015

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

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

В этом примере я указываю, что «0» должно отображаться вместо 0, «1» вместо 1 и т. Д.

3 голосов
/ 16 января 2013

Один 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-элемента ниже, как вы можете видеть извыше jQuery селектор. 

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

Он может решить мои проблемы, даже если это своего рода хак.

2 голосов
/ 30 января 2014

Этот хак работает до тех пор, пока Google не изменит API в будущем. Также это работает, пока вы не используете экспериментальную опцию «проводник». Если вы используете масштабирование, то диаграмма перерисовывается при каждом событии колесика мыши, и ваши значения исчезают. Очень печально, что на графике 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 миллисекунд - это всего лишь экспериментальное значение, и оно зависит от того, как долго ваш график перерисовывается по событию mousewheel. К сожалению, пользователь может обнаружить мигание, когда старые значения заменяются на.

Я наконец нашел реальное решение. 

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,
}
},
...