如何使用amchart堆叠图表？

Chris2go 发表于 Dev

克里斯·哥

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

我使用实时编辑器进行了尝试，但没有找到任何可行的方法。

这里的图片供解释：

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

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

谢谢你的帮助：）

Martynasma

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

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

第一张图表

滚动条已启用
图表光标已启用
类别轴已隐藏
图例已禁用
底边距：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>

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。