代码之家 › 专栏 › 技术社区 › Santhosh

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

rgraph angular javascript

Santhosh · 技术社区 · 4 年前

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

当用户点击x轴标签时,我需要获取索引。
有时无法动态更新图形数据。(当我们在服务器上部署代码时,会产生这个问题,但作为一名开发人员,我必须解决它。) 请在下图中找到。

对于每个用户操作,删除并添加相同的3d图形是一种好方法,这样就不会再次出现重叠。
我还需要x轴标题和y轴标题。

如果有人知道,请帮帮我。

0 回复 | 直到 4 年前

Richard 4 年前

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();

(使用“更改视图”按钮查看代码)

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

我的酒吧。数据=[4,8,6,3,5,4,8,7,8,4,6,9];

然后调用重画方法:

RGraph。重画();

如果不调用重画方法,它不会改变。

如果你也从ObjectRegistry中删除了图表,并且没有1000个用户操作,那么我认为这是可以的。您可以通过以下方法清除ObjectRegistry:

RGraph。ObjectRegistry。清除();

它有以下特性:

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

Richard 4 年前

我一直在修补这些代码,这些代码应该可以在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>