如何在 RGraph 中单击时获取标签索引

Question

我在 Angular 7 应用程序中使用 RGraph。 并能够显示 3d 图形和所有内容。

1. 当用户点击 x 轴标签时，我需要获取索引。

2. 有时无法动态更新图形数据。（当我们在服务器中部署代码时会产生此问题，但作为开发人员，我必须修复它。） 请在下图中找到。

1. 这是为每个用户操作删除和添加相同的 3d 图形以便不再出现重叠的好方法吗？
2. 我还需要 x 轴标题和 y 轴标题。

如果有人知道请帮助我。

Answer 1

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: '\0',
            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();

（使用“更改视图”按钮查看代码）

1. 更新只是在对象上设置新数据的一种情况：

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

然后调用重绘方法：

RGraph.redraw();

如果你不调用重绘方法，它不会改变。

1. 如果您也从 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

Answer 2

我一直在修改这个，这段代码应该可以在 v5.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: '\0',
        tooltipsHighlight: false
      }
    }).draw().on('click', function (e, shape)
    {
        alert(shape.dataset);
    });
</script>