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

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

  •  0
  • Santhosh  · 技术社区  · 4 年前

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

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

    2. 有时无法动态更新图形数据。(当我们在服务器上部署代码时,会产生这个问题,但作为一名开发人员,我必须解决它。) 请在下图中找到。 enter image description here

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

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

    0 回复  |  直到 4 年前
        1
  •  0
  •   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();
    

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

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

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

    然后调用重画方法:

    RGraph。重画();

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

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

    RGraph。ObjectRegistry。清除();

    1. 它有以下特性:

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

        2
  •  0
  •   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>