Question

我正在使用amcharts绘制一个动画图。我想在一张图中绘制几个折线图。但我的代码只绘制了一个图表。当我为第二行图添加代码时，由于错误它没有显示任何内容。我如何在其中添加第二个折线图。这是.js文件。

var chart = AmCharts.makeChart("chartdiv", {
"type": "serial",
"theme": "light",
"marginTop":0,
"marginRight": 80,
"dataProvider": [{
    "D": "100",
    "value": 10
}, {
    "D": "200",
    "value": 20
}, {
    "D": "200",
    "value": 30
}, {
    "D": "400",
    "value": 40
}, {
    "D": "500",
    "value": 50

}],
"graphs": [{
    "id":"g1",
    "balloonText": "[[category]]<br><b><span style='font-size:14px;'>[[value]]</span></b>",
    "bullet": "round",
    "bulletSize": 8,         
    "lineColor": "#d1655d",
    "lineThickness": 2,
    "negativeLineColor": "#637bb6",
    "type": "smoothedLine",
    "valueField": "value"

}],

"chartCursor": {    /* required for  zoom effect */
    "cursorAlpha": 0,
    "valueLineEnabled":true,
    "valueLineBalloonEnabled":true,
    "valueLineAlpha":0.5,
    "fullWidth":true
},
/*show x axis values on graph*/
"categoryField": "D",


});

    chart.addListener("rendered", zoomChart);
    if(chart.zoomChart){
      chart.zoomChart();
 }

   function zoomChart(){
   chart.zoomToIndexes(Math.round(chart.dataProvider.length * 0.4),  Math.round(chart.dataProvider.length * 0.55));
 }

Answer 1

我找到了解决方案。如果要在单个图形中绘制更多线图。只需在“图形”中添加额外的id'：并在该id中添加额外的valueField。并在“dataProvider”中添加所需的点：类似地，您可以通过在“graph”中添加ID来为2个以上的图表执行此操作：并使用.js扩展名保存。

 var chart = AmCharts.makeChart("chartdiv", {
"type": "serial",
"theme": "light",
"marginTop":0,
"marginRight": 80,
"dataProvider": [{
    "D": "5",
    "value":0.30,
     "value1":0.5,

}, {
    "D": "10",
    "value": 0.29,
     "value1":0.27,

}, {
    "D": "15",
    "value": 0.28,
     "value1":0.20,

}, {
    "D": "20",
    "value": 0.27,
     "value1":0.32,

}, {
    "D": "25",
    "value": 0.26,
     "value1":0.25,


}],
"graphs": [{
    "id":"g1",
    "balloonText": "[[category]]<br><b><span style='font-size:14px;'>[[value]]</span></b>",
    "bullet": "round",
    "bulletSize": 8,         
    "lineColor": "#d1655d",
    "lineThickness": 2,
    "negativeLineColor": "#637bb6",
    "type": "smoothedLine",
     "title": "redpoint",
    "valueField": "value"
}, {

     "id":"g2",
     "balloonText": "[[category]]<br><b><span style='font-size:14px;>   [value]]</span></b>",  
     "bullet": "round",
     "bulletSize": 8,         
     "lineColor": "#20acd4",
     "lineThickness": 2,
     "negativeLineColor": "#637bb6",
     "type": "smoothedLine",
     "title": "bluepoint",
     "valueField": "value1"
     }],

    "chartCursor": {    /* required for  zoom effect */
    "cursorAlpha": 0,
    "valueLineEnabled":true,
    "valueLineBalloonEnabled":true,
    "valueLineAlpha":0.5,
    "fullWidth":true
},
  /*legend show points value on top*/
 "legend": {
 "useGraphSettings": true,
 "position": "top"
},
 /*show x axis values on graph*/
 "categoryField": "D",

 });
 chart.addListener("rendered", zoomChart);/*zoom effect*/
 if(chart.zoomChart){
 chart.zoomChart();
 }
 function zoomChart(){
 chart.zoomToIndexes(Math.round(chart.dataProvider.length * 0.4),   Math.round(chart.dataProvider.length * 0.55));
 }

如何使用amcharts在单个图形中绘制多个折线图

1 个答案: