amcharts 5实时条形图排序问题

Question

我正在使用 am5charts 在网页上生成 XY 系列条形图，其中 y 轴是名称的分类轴，x 轴包含表示 0 到 1 之间比率的分数值。页面正确加载图表但是当用户尝试根据不同的变量（使用下拉列表）进行排序时，图表将适当地对 y 轴进行排序，但一些条形图（x 轴）将在图表中消失。

每个数据项看起来像这样：

{'name': 'John Doe', 'Rate': .2, 'Exp_rank': 0}

在下面的完整 js 代码中，当用户从下拉列表中选择“Experience”时，我将 Y 轴数据项的索引（在

sortCategoryAxis

函数中）更改为指向“Exp_rank”中的值。使用 js 代码 belnames/bars 排序，但“Mike”失去了他的酒吧。我尝试了几种不同的方法，例如颠倒顺序来排序，操纵排名，使其不是基于 0 的，或者只使用原始数字（而不是排名），但它们要么没有解决问题，要么使问题变得更糟.如果我将数据配对到少于 7 个示例，它似乎有效，但如果我添加更多值，情况会变得更糟。我想了解导致条形图丢失的类型是什么以及无论我在条形图上显示多少数据点都可以修复它。

var barchart;
sortdict = {'id1': 'Exp_rank'};

var root = am5.Root.new("chartdiv");
root.setThemes([
  am5themes_Animated.new(root)
]);

var chart = root.container.children.push(
        am5.Container.new(root, {
            layout: root.gridLayout,
            width: am5.percent(70),
            height: am5.percent(100),
        })
    )
chartstuff = create_bar('Rate','Test Chart');
    
    

// parameters: html_title, category, values
function create_bar(seriesName,title){
    
    var data =[ { name: 'John',
        Rate: 0.005,
        Exp_rank: 0 },
      { name: 'Steve',
        Rate: 0.005,
        Exp_rank: 1 },
      { name: 'Josh',
        Rate: 0.005,
        Exp_rank: 6 },
      { name: 'Greg',
        Rate: 0.005,
        Exp_rank: 7 },
      { name: 'Brandon',
        Rate: 0.0556,
        Exp_rank: 2 },
      { name: 'Dirk',
        Rate: 0.0833,
        Exp_rank: 3 },
      { name: 'Sean',
        Rate: 0.0857,
        Exp_rank: 4 },
      { name: 'Mike',
        Rate: 0.0909,
        Exp_rank: 5 } ]
    

    
    var barchart = chart.children.push(
    am5xy.XYChart.new(
        root, {width: am5.percent(50),
            height: am5.percent(85),
            // paddingTop: 50,
            paddingLeft: 100,
            marginTop: 100,
            
        })
    )

    barchart.children.unshift(am5.Label.new(root, {
        html: title,
        dy: -50,
        fontWeight: 'bold',
        fontSize: 17

        
        }
    ))

    var xAxis = barchart.xAxes.push(
    am5xy.ValueAxis.new(root, {
        renderer: am5xy.AxisRendererX.new(root, {
            opacity: 1,
            numberFormat: "#.00'%'"
        })
    })
    );

    var yAxis = barchart.yAxes.push(
        am5xy.CategoryAxis.new(root, {
            renderer: am5xy.AxisRendererY.new(root, {
                minGridDistance: 12
                
            }),
            categoryField: 'name',
        })
        );
 
    const yAxisRenderer = yAxis.get('renderer');
    const xAxisRenderer = xAxis.get('renderer');
    yAxisRenderer.grid.template.setAll({ disabled: true, visible: false });//hides all
    xAxisRenderer.grid.template.setAll({ disabled: true, visible: false });//hides all

    yAxis.data.setAll(data);
    
    var series = barchart.series.push(am5xy.ColumnSeries.new(root, {
                name: seriesName,
                xAxis: xAxis,
                yAxis: yAxis,
                valueXField: 'Rate',
                categoryYField: 'name',
                fill: am5.color('#e1e1e1'),
                numberFormat : "#.00'%'",
                width: am5.percent(100),
                duration: 5000
            })
        );
            
            
    series.animate({
      key: "fill",
      duration: 5000,
      easing: am5.ease.elastic
    });


   series.dataItems.sort(function(x, y) {
        return x.get("valueX") - y.get("valueX"); // descending
        //return y.get("valueY") - x.get("valueX"); // ascending
        })
    
      
      xAxis.get('renderer').labels.template.set("fontSize", 12);
      // yAxis.get('renderer').labels.template.set("labelFontSize", 12);
      yAxis.get('renderer').labels.template.set("fontSize", 10);

      series.data.setAll(data);
      series.appear();
      series.columns.template.set("interactive", true);
      series.columns.template.set("tooltipText",'Rate: {valueX}');


    let mysorter = am5stock.DropdownListControl.new(root, {
    stockChart: barchart,
     name: "Sorting options",
    items: [{
            id: "id1",
            label: "Experience"
            }]
    })


    var toolbar = am5stock.StockToolbar.new(root, {
    container: document.getElementById("chartcontrols"),
    stockChart: barchart,
    controls: [
        mysorter
    ]
    });
    
    mysorter.events.on("selected",function(ev){
        sortCategoryAxis(series, ev.item.id, xAxis, yAxis);
    })

    return [series, barchart];

}

function getSeriesItem(series,category) {
  for (var i = 0; i < series.dataItems.length; i++) {
    var dataItem = series.dataItems[i];
    if (dataItem.get("categoryY") == category) {;
      return dataItem;
    }
  }
}

function sortCategoryAxis(series,sortType,xAxis, yAxis) {
    
    series.dataItems.sort(function (x, y) {
        return  x.dataContext[sortType] - y.dataContext[sortType]; // descending

      })
    

    am5.array.each(yAxis.dataItems, function (dataItem) {       
        var seriesDataItem = getSeriesItem(series,dataItem.get("category"));
        if (seriesDataItem) {
            var idx = series.dataItems.indexOf(seriesDataItem);
            var n_idx = series.dataItems[idx].dataContext[sortdict[sortType]];
            var deltaPosition = (n_idx - idx) / series.dataItems.length; ;
            dataItem.set("index", n_idx);
            dataItem.set("deltaPosition", -deltaPosition);
            dataItem.animate({
                key: "deltaPosition",
                to: 0,
                duration: 1000,
                easing: am5.ease.out(am5.ease.cubic)
              })
        }
    });

    yAxis.dataItems.sort(function (x, y) {
          return x.get("index") - y.get("index")
        });  
}

TIA