Блог

Я использую RGraph в нашем приложении angular 7. и возможность показывать 3D-графики и все такое.

1. У меня есть требование получать индекс, когда пользователь нажимает на метки оси x.
2. Иногда не удается динамически обновлять данные графика.(эта проблема возникает при развертывании кода на сервере, но как разработчик я должен это исправить.) пожалуйста, найдите на изображении ниже.

3. Хороший ли это способ удалить и добавить один и тот же 3D-график для каждого действия пользователя, чтобы перекрытие больше не возникало?
4. Мне также нужен заголовок оси x и заголовок оси y.

Если кто-нибудь знает, пожалуйста, помогите мне.

1. Это возможно для 2D-диаграммы с помощью двух диаграмм — вторая расположена над метками первой. Смотрите этот пример:

https://codepen.io/rgraph/full/poEJKKm

Там тоже есть пример 3D-диаграммы с включенными осями.

 <script>
    labels = ['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec'];

    bar = new RGraph.Bar({
      id:'cvs',
      data: [8,4,6,3,5,4,2,8,6,4,2,2],
      options: {
          marginInner: 10,
          xaxisLabels: labels,
          xaxis: false,
          yaxis: false,
          backgroundGridVlines: false,
          backgroundGridBorder: false
      }
    }).draw();

    bar2 = new RGraph.Bar({
      id:'cvs',
      data: [1,1,1,1,1,1,1,1,1,1,1,1],
        options: {
            xaxis: false,
            yaxis: false,
            backgroundGrid: false,
            marginBottom: 10,
            marginTop: 215,
            colors: ['transparent'],
            variantThreedXaxis: false,
            variantThreedYaxis: false,
            yaxisScale: false,
            tooltips: '',
            tooltipsHighlight: false
        }
    }).draw().on('click', function (e, shape)
    {
        alert(shape.dataset);
    });
</script>
    
    
    
    

    bar = new RGraph.Bar({
      id:'cvs2',
      data: [8,4,6,3,5,4,2,8,6,4,2,2],
      options: {
          variant: '3d',
          marginInner: 10,
          xaxisLabels: labels
      }
    }).draw();
 

(Используйте кнопку «Изменить вид», чтобы увидеть код)

2. Обновление — это просто случай установки новых данных для объекта:

MyBar.data = [4,8,6,3,5,4,8,7,8,4,6,9];

А затем вызвать метод перерисовки:

RGraph.redraw();

Если вы не вызовете метод перерисовки, он не изменится.

3. Если вы также удалите диаграмму из objectRegistry и не будет 1000 пользовательских действий, тогда, я полагаю, все будет в порядке. Вы можете очистить objectRegistry с помощью:

RGraph.objectRegistry.clear();

4. Для этого есть свойства:

https://www.rgraph.net/canvas/bar.html#xaxis-properties
https://www.rgraph.net/canvas/bar.html#yaxis-properties

Я возился с этим, и этот код должен работать с библиотеками версии 5.26:

 <script>

    labels = ['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec'];

    bar = new RGraph.Bar({
      id:'cvs1',
      data: [8,4,6,3,5,4,2,8,6,4,2,2],
      options: {
          variant: '3d',
          marginInner: 10,
          xaxisLabels: labels,
          backgroundGridVlines: false,
          backgroundGridBorder: false
      }
    }).draw();

    bar2 = new RGraph.Bar({
      id:'cvs1',
      data: [1,1,1,1,1,1,1,1,1,1,1,1],
      options: {
        xaxis: false,
        yaxis: false,
        backgroundGrid: false,
        marginBottom: 10,
        marginTop: 215,
        colors: ['transparent'],
        variantThreedXaxis: false,
        variantThreedYaxis: false,
        yaxisScale: false,
        tooltips: '',
        tooltipsHighlight: false
      }
    }).draw().on('click', function (e, shape)
    {
        alert(shape.dataset);
    });
</script>