Amcharts可视化水平条形图中的部分数据

时间:2019-09-23 14:34:23

标签: javascript scrollbar amcharts amcharts4

我正在尝试可视化水平条形图,并且只想显示已加载记录的一部分并能够滚动结果。

我尝试使用垂直滚动条执行此操作。这就是生成的JSFiddle:jsfiddle

function loadBar(){ 

    // Themes begin
    am4core.useTheme(am4themes_animated);
    // Themes end

    // Create chart instance
    var chart = am4core.create("chartdiv", am4charts.XYChart);

    // Set up data source
    chart.data= [
    {"name": "Mario12","overhead": 2},
    {"name": "Jenny12","overhead": 2},
    ...
    ];


    //create category axis for years
    var categoryAxis = chart.yAxes.push(new am4charts.CategoryAxis());
    var yTitle = 'Agents';
    categoryAxis.title.text = yTitle;
    ...

    //create value axis for income and expenses
    var valueAxis = chart.xAxes.push(new am4charts.ValueAxis());
    valueAxis.min = 0;
    ...


    //create columns
    var series = chart.series.push(new am4charts.ColumnSeries());
    series.dataFields.categoryY = "name";
    series.dataFields.valueX = "overhead";
    ...

    chart.scrollbarY = new am4core.Scrollbar();
    chart.scrollbarY.parent = chart.leftAxesContainer;

}

loadBar();

所需结果应改为result

0 个答案:

没有答案