如何用 amchart 堆叠图表？

Question

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

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

这里有一些图片来解释：

目前我有这张图：http://imgur.com/XpU42xK

但我想要这样的图表：http://imgur.com/xdwJ7lu

感谢您的帮助:)

Answer 1

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

首先你需要准备两个图表

第一张图表

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

第二张图表

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

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

同步图表

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

• 光标
• 传奇
• 缩放/平移

这就是这段代码的用武之地：

/**
 * 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 );
    }
  } );
} );

瞧：

这是一个工作演示：

/**
 * 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>