Как отформатировать оси диаграммы ExtJs?

Question

Я создаю диаграмму ExtJs со следующим кодом и, к сожалению, я не знаю, как стилизовать xAxis и yAxis.Не удалось найти никакой помощи в документации ExtJs.

Ext.create('Ext.chart.Chart', {
       renderTo: div,
       theme: 'Browser:gradients',
       width: div.offsetWidth,
       height: div.offsetHeight,
       animate: true,
       store: store,
       axes: [
              {
                  title: 'Number of Ratings',
                  type: 'Numeric',
                  position: 'left',
                  fields: ['data1', 'data2', 'data3'],
                  minimum: 0,
                  tips: {
                      trackMouse: true,
                      width: 110,
                      height: 25,
                      renderer: function (storeItem, item) {
                          this.setTitle(storeItem.get('name');
                      }
                  },
              },
              {
                  title: 'Rating Categories',
                  type: 'Category',
                  position: 'bottom',
                  fields: ['name'],
              }
          ],
       series: [
                {
            type: 'column', 
            title: createLegendTitles(response.ratingResults),
            xField: 'name',
            yField: ['data1','data2', 'data3'],
        }
       ],
});

Как мне отформатировать ось x и ось диаграммы?(например, настройка цвета, размера шрифта, семейства шрифтов и т. д.)

Answer 1

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

Звучит так, будто вы пытаетесь настроить стили меток оси. Существует конфигурация с именем label (показана в примере кода в документации для Ext.chart.axis.Axis, но не в конфигурации). Он принимает объект типа Ext.chart.Label, который сам имеет конфиги для цвета, шрифта, ориентации, пользовательской функции рендеринга, поворота, положения отображения и т. Д. Вы можете получить сводку здесь , но это тоже довольно неполный.

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

РЕДАКТИРОВАТЬ: Чтобы отредактировать саму линию оси, вам, возможно, придется сделать некоторые переопределения / расширения класса Ext.chart.axis.Axis. В нижней части метода drawAxis есть код, который выглядит следующим образом:

if (!me.axis) {
    me.axis = me.chart.surface.add(Ext.apply({
        type: 'path',
        path: path
    }, me.axisStyle));
}

Похоже, именно здесь вы хотите добавить свой код для применения стилей к оси. Насколько я могу судить, свойство me.axisStyle на самом деле не устанавливается в классе Axis, поэтому вам придется искать его. Это может быть ручная настройка в конфигурации осей, она может быть сгенерирована темами или что-то еще полностью.

Answer 2

Это может сработать

axes: [
    {
        title: 'Number of Ratings',
        label: {
            renderer: function(v){
                return '<span class="numRatingsAxis">' + v + '</span>';
            }
        }
        ...
    }
]

Answer 3

Я хотел бы дополнить ответ здесь.Если вы используете новый пакет sencha-charts, вы должны поместить рендер непосредственно на оси, а не внутри метки.Например:

axes: [{
    title: 'Number of Ratings',
    renderer: function(v){
        return '<span class="numRatingsAxis">' + v + '</span>';
    }
}]

См. https://docs.sencha.com/extjs/5.1/whats_new/5.0/charts_upgrade_guide.html#Renderers

Answer 4

Я не думаю, что есть свойство для этого, но вы можете отформатировать их с помощью CSS.

Answer 5

Вы можете сделать это, установив тему на графике, ознакомившись с руководством по графику:

http://docs.sencha.com/ext-js/4-0/#/guide/drawing_and_charting