Почему метки RGraph не отображаются?

У меня есть простой макет диаграммы с использованием RGraph.net, и я не могу понять, почему метки месяца для столбцов и метка «GBP» для оси не отображаются.

Я поместил код в https://jsfiddle.net/Abeeee/kcwqn850/32/

var chart = new RGraph.Bar('chart_column', [0, 0, 0, 0, 0, 0, 0, 0, 0, 165, 40, 489, 1011])
  .set('zoom.factor', 11)
  .set('shadow', true)
  .set('labels', ['Jul18', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec', 'Jan19', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul'])
  .set('shadow.offsetx', 5)
  .set('shadow.offsety', 5)
  .set('shadow.blur', 9)
  .set('gutter.left', 65) 
  .set('text.font', 'Segoe UI')
  .set('colors', ['#FF0000'])
  .set('align', 'left')
  .set('title.yaxis', 'GBP')
  .set('title.yaxis.size', 10)
  .set('title.yaxis.x', 7)
  .set('title.yaxis.y', 120)
  .set('title.yaxis.bold', false)
  .set('grid.hoverable', true)
  .set('tooltips.effect', 'fade')
  .set('tooltips', ['GBP 0', 'GBP 0', 'GBP 0', 'GBP 0', 'GBP 0', 'GBP 0', 'GBP 0', 'GBP 0', 'GBP 0', 'GBP 165', 'GBP 40', 'GBP 489', 'GBP 1,011'])
  .set('tooltips.event', 'mousemove')
  .on('mousemove', function(e, shape) {
      e.target.style.cursor = 'pointer';
  })
  .on('click', function myClick(e, shape) {
      var index = shape[5];
      alert(labels[index]);
  })
.draw();

Я хочу видеть метки месяца внизу (под осью/столбцами) и метку GBP слева от диаграммы, но ничего не отображается.

Чего не хватает?

Спасибо, Эйб.


rgraph
person user1432181    schedule 17.07.2019    source источник

Ответы (1)


arrow_upward
2
arrow_downward

Вы используете старые имена свойств. В версии 5 многим были даны новые имена. Например, labels становится xaxisLabels. Вот ваш код обновлен:

new RGraph.Bar({
    id: 'chart_column',
    data: [0, 0, 0, 0, 0, 0, 0, 0, 0, 165, 40, 489, 1011],
    options: {
        shadow: true,
        xaxisLabels: ['Jul18', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec', 'Jan19', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul'],
        shadowOffsetx: 5,
        shadowOffsety: 5,
        shadowBlur: 9,
        marginLeft: 65,
        textFont: 'Segoe UI',
        colors: ['red'],
        yaxisTitle: 'GBP',
        yaxisTitleSize: 10,
        yaxisTitleX: 7,
        yaxisTitleY: 120,
        yaxisTitleBold: false,
        tooltipsEffect: 'fade',
        tooltips: ['GBP 0', 'GBP 0', 'GBP 0', 'GBP 0', 'GBP 0', 'GBP 0', 'GBP 0', 'GBP 0', 'GBP 0', 'GBP 165', 'GBP 40', 'GBP 489', 'GBP 1,011'],
        tooltipsEvent: 'mousemove'
    }
}).draw().on('mousemove', function (e, shape)
{
    e.target.style.cursor = 'pointer';
    
}).on('click', function (e, shape)
{
    var index = shape[5];
    alert(labels[index]);

}).draw();
person Richard    schedule 17.07.2019