graph - 如何使用 amchart 堆叠图表？

标签 graph stack scrollbar amcharts

是否可以在一张图表中堆叠 2 个或更多图表？使用相同的滚动条/图表光标？

我用实时编辑器尝试过，但没有找到任何选项来实现这一点。

这里有一些图片用于解释:

目前我有这个图表:/image/SLQFm.jpg

但我想要一个像这样的图表:/image/47fAh.jpg

感谢您的帮助:)

最佳答案

只是为了运动，我尝试实现它。好消息 - 这是可能的:)

首先，您需要准备两张图表

第一个图表

  • 启用滚动条
  • 图表光标已启用
  • 类别轴隐藏
  • 图例已禁用
  • 下边距:0

第二张图表

  • 滚动条已禁用
  • 图表光标已启用
  • 类别轴已启用
  • 已启用图例
  • 上边距:0

这将创建两个图表，“粘合”在一起，就像在您的模型中一样:

enter image description here

同步图表

它们仍然独立运行，就像两个独立的图表一样。我们必须同步它们:

  • 光标
  • 图例
  • 缩放/平移

这就是这段代码的用处:

/**
 * Use events to sync up cursors and zooms
 */
for ( var x = 0; x < AmCharts.charts.length; x++ ) {

  // use "changed" event to track cursor movement on all charts
  // place the cursor on other charts on the same index
  AmCharts.charts[ x ].addListener( "changed", function( event ) {

    // find which category is currently being rolled over
    var category = event.chart.dataProvider[ event.index ][ event.chart.categoryField ];

    // cycle through all available charts and place the cursor at
    // the same category
    for ( var i = 0; i < AmCharts.charts.length; i++ ) {
      if ( event.chart !== AmCharts.charts[ i ] ) {
        AmCharts.charts[ i ].chartCursor.showCursorAt( category );
      }
    }

  } );

  // use "zoomed" event to track zooms/pans so we can apply
  // the same zoom across other charts
  AmCharts.charts[ x ].addListener( "zoomed", function( zoomEvent ) {

    // cycle through all available charts and apply same zoom
    for ( var i = 0; i < AmCharts.charts.length; i++ ) {
      if ( zoomEvent.chart !== AmCharts.charts[ i ] && ( AmCharts.charts[ i ].startIndex != zoomEvent.startIndex || AmCharts.charts[ i ].endIndex != zoomEvent.endIndex ) ) {
        AmCharts.charts[ i ].zoomToIndexes( zoomEvent.startIndex, zoomEvent.endIndex );
      }
    }

  } );

}

/**
 * Use the last chart to display legend
 * We will collect graphs from other charts and mirror them on
 * the last chart.
 */
var lastChart = AmCharts.charts[ AmCharts.charts.length - 1 ];
for ( var x = 0; x < ( AmCharts.charts.length - 1 ); x++ ) {

  // add graphs
  for ( var g = 0; g < AmCharts.charts[ x ].graphs.length; g++ ) {

    // create the related graph
    var graph = new AmCharts.AmGraph();
    graph.lineAlpha = 0;
    graph.lineColor = AmCharts.charts[ x ].graphs[ g ].lineColor;
    graph.relatedGraph = AmCharts.charts[ x ].graphs[ g ];
    graph.valueField = "value_" + x + "_" + g;
    graph.showBalloon = false;
    graph.includeInMinMax = false;
    graph.title = AmCharts.charts[ x ].graphs[ g ].title;
    lastChart.addGraph( graph );

    // mirror data for rollovers
    for ( var i = 0; i < lastChart.dataProvider.length; i++ ) {
      lastChart.dataProvider[ i ][ graph.valueField ] = AmCharts.charts[ x ].dataProvider[ i ][ AmCharts.charts[ x ].graphs[ g ].valueField ];
    }

  }

}

/**
 * Add events to the legend of last chart so we can toggle
 * graphs of the other charts
 */
lastChart.addListener( "init", function() {

  // hide graph
  lastChart.legend.addListener( "hideItem", function( event ) {
    if ( event.dataItem.relatedGraph !== undefined ) {
      event.dataItem.relatedGraph.chart.hideGraph( event.dataItem.relatedGraph );
    }
  } );

  // show graph
  lastChart.legend.addListener( "showItem", function( event ) {
    if ( event.dataItem.relatedGraph !== undefined ) {
      event.dataItem.relatedGraph.chart.showGraph( event.dataItem.relatedGraph );
    }
  } );
} );

瞧:

enter image description here

这是一个工作演示:

/**
 * First chart
 * With scrollbar
 * Without category axis
 */
AmCharts.makeChart( "chartdiv1", {
  "type": "serial",
  "theme": "light",
  "path": "http://www.amcharts.com/lib/3/",
  "dataProvider": [ {
    "category": "Category #1",
    "value": 2025
  }, {
    "category": "Category #2",
    "value": 1882
  }, {
    "category": "Category #3",
    "value": 1809
  }, {
    "category": "Category #4",
    "value": 1322
  }, {
    "category": "Category #5",
    "value": 1122
  }, {
    "category": "Category #6",
    "value": 1114
  }, {
    "category": "Category #7",
    "value": 984
  }, {
    "category": "Category #8",
    "value": 711
  }, {
    "category": "Category #9",
    "value": 665
  }, {
    "category": "Category #10",
    "value": 580
  } ],
  "valueAxes": [ {
    "gridAlpha": 0.2,
    "dashLength": 0,
    "showFirstLabel": false,
    "ignoreAxisWidth": true,
    "title": "First graph"
  } ],
  "startDuration": 1,
  "graphs": [ {
    "id": "g1",
    "lineThickness": 2,
    "lineColor": "#f56400",
    "type": "step",
    "valueField": "value",
    "title": "Graph 1"
  } ],
  "chartCursor": {
    "categoryBalloonEnabled": false,
    "cursorColor": "#c30000",
    "animationDuration": 0
  },
  "chartScrollbar": {},
  "categoryField": "category",
  "categoryAxis": {
    "ignoreAxisWidth": true,
    "labelsEnabled": false,
    "axisAlpha": 0
  },
  "marginBottom": 0,
  "marginLeft": 80

} );

/**
 * Second chart
 * Without scrollbar
 * With category axis
 */
AmCharts.makeChart( "chartdiv2", {
  "type": "serial",
  "theme": "light",
  "zoomOutText": "",
  "path": "http://www.amcharts.com/lib/3/",
  "dataProvider": [ {
    "category": "Category #1",
    "value": 521
  }, {
    "category": "Category #2",
    "value": 215
  }, {
    "category": "Category #3",
    "value": 655
  }, {
    "category": "Category #4",
    "value": 601
  }, {
    "category": "Category #5",
    "value": 122
  }, {
    "category": "Category #6",
    "value": 114
  }, {
    "category": "Category #7",
    "value": 521
  }, {
    "category": "Category #8",
    "value": 351
  }, {
    "category": "Category #9",
    "value": 222
  }, {
    "category": "Category #10",
    "value": 156
  } ],
  "valueAxes": [ {
    "gridAlpha": 0.2,
    "dashLength": 0,
    "showLastLabel": false,
    "ignoreAxisWidth": true,
    "title": "Second graph"
  } ],
  "startDuration": 1,
  "graphs": [ {
    "id": "g1",
    "lineThickness": 2,
    "lineColor": "#fae879",
    "type": "step",
    "valueField": "value",
    "title": "Graph 2"
  } ],
  "chartCursor": {
    "cursorColor": "#c30000",
    "animationDuration": 0
  },
  "categoryField": "category",
  "categoryAxis": {
    "tickPosition": "middle"
  },
  "legend": {},
  "marginTop": 0,
  "marginLeft": 80

} );

/**
 * Use events to sync up cursors and zooms
 */
for ( var x = 0; x < AmCharts.charts.length; x++ ) {

  // use "changed" event to track cursor movement on all charts
  // place the cursor on other charts on the same index
  AmCharts.charts[ x ].addListener( "changed", function( event ) {
    
    // find which category is currently being rolled over
    var category = event.chart.dataProvider[ event.index ][ event.chart.categoryField ];

    // cycle through all available charts and place the cursor at
    // the same category
    for ( var i = 0; i < AmCharts.charts.length; i++ ) {
      if ( event.chart !== AmCharts.charts[ i ] ) {
        AmCharts.charts[ i ].chartCursor.showCursorAt( category );
      }
    }

  } );

  // use "zoomed" event to track zooms/pans so we can apply
  // the same zoom across other charts
  AmCharts.charts[ x ].addListener( "zoomed", function( zoomEvent ) {

    // cycle through all available charts and apply same zoom
    for ( var i = 0; i < AmCharts.charts.length; i++ ) {
      if ( zoomEvent.chart !== AmCharts.charts[ i ] && ( AmCharts.charts[ i ].startIndex != zoomEvent.startIndex || AmCharts.charts[ i ].endIndex != zoomEvent.endIndex ) ) {
        AmCharts.charts[ i ].zoomToIndexes( zoomEvent.startIndex, zoomEvent.endIndex );
      }
    }

  } );
  
}

/**
 * Use the last chart to display legend
 * We will collect graphs from other charts and mirror them on
 * the last chart.
 */
var lastChart = AmCharts.charts[ AmCharts.charts.length - 1 ];
for ( var x = 0; x < ( AmCharts.charts.length - 1 ); x++ ) {
  
  // add graphs
  for ( var g = 0; g < AmCharts.charts[ x ].graphs.length; g++ ) {
    
    // create the related graph
    var graph = new AmCharts.AmGraph();
    graph.lineAlpha = 0;
    graph.lineColor = AmCharts.charts[ x ].graphs[ g ].lineColor;
    graph.relatedGraph = AmCharts.charts[ x ].graphs[ g ];
    graph.valueField = "value_" + x + "_" + g;
    graph.showBalloon = false;
    graph.includeInMinMax = false;
    graph.title = AmCharts.charts[ x ].graphs[ g ].title;
    lastChart.addGraph( graph );
    
    // mirror data for rollovers
    for ( var i = 0; i < lastChart.dataProvider.length; i++ ) {
      lastChart.dataProvider[ i ][ graph.valueField ] = AmCharts.charts[ x ].dataProvider[ i ][ AmCharts.charts[ x ].graphs[ g ].valueField ];
    }
    
  }
  
}

/**
 * Add events to the legend of last chart so we can toggle
 * graphs of the other charts
 */
lastChart.addListener( "init", function() {
  
  // hide graph
  lastChart.legend.addListener( "hideItem", function( event ) {
    if ( event.dataItem.relatedGraph !== undefined ) {
      event.dataItem.relatedGraph.chart.hideGraph( event.dataItem.relatedGraph );
    }
  } );
  
  // show graph
  lastChart.legend.addListener( "showItem", function( event ) {
    if ( event.dataItem.relatedGraph !== undefined ) {
      event.dataItem.relatedGraph.chart.showGraph( event.dataItem.relatedGraph );
    }
  } );
} );
.chartdiv {
  width: 100%;
  height: 300px;
  font-size: 11px;
}
<script src="http://www.amcharts.com/lib/3/amcharts.js"></script>
<script src="http://www.amcharts.com/lib/3/serial.js"></script>
<script src="http://www.amcharts.com/lib/3/themes/light.js"></script>
<div id="chartdiv1" class="chartdiv"></div>
<div id="chartdiv2" class="chartdiv"></div>

关于graph - 如何使用 amchart 堆叠图表？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/30223530/

上一篇：php - Laravel 5.0 模型未找到异常

下一篇：reporting-services - 如何使用TSQL删除SSRS中的用户

相关文章：

c - gcc 如何确定基于 C 的函数将使用的堆栈大小？

wpf - 在 wpf 中，我如何使数据网格适合窗口高度

c - 链接到外部 C 库的 R 包

javascript - 存储分步指南的数据结构

algorithm - 具有两个不同边权重的图

graph - 简单的浮图不更新

c++ - c++中堆栈分配数据的生命周期

go - 如何在不修改堆栈的情况下将表的内容转储到堆栈中？

android - 如何自定义ListView的滚动条？

javascript - 如何实现 Facebook 聊天垂直滚动条样式？

©2024 IT工具网  联系我们