我如何使用 amcharts 在一个图中绘制多个折线图

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

我找到了解决办法。如果你想在一张图中绘制更多的线图。只需在 "graph": 中添加额外的 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 在一个图中绘制多个折线图

How I can draw several line graph in one single graph using amcharts

amcharts

jscharts