2 графика, разделяющая одну ось x

Question

Я недавно начал использовать amchart для одного из моих проектов. Ищу помощь по проблеме от любого, у кого есть опыт работы с AMchart.

У меня есть набор данных, предполагающий показать две серии на гладком графике линии amchart. Мне удалось заставить его показать 2 серии, но эти две серии не используют одну и ту же ось Х.

Итак, любая идея, как я могу заставить ее использовать одни и те же оси x. Я приложил код ниже. На картинке есть строка json, которая возвращается функцией load_dashboard_leads() в моем коде.

<script> 
 
     var chart; 
 
     var graph; 
 
     var leadsGrowthData = <?PHP echo load_dashboard_leads();?> 
 

 
      AmCharts.ready(function() { 
 
       // SERIAL CHART 
 
       chart = new AmCharts.AmSerialChart(); 
 

 
       chart.dataProvider = leadsGrowthData; 
 
       chart.marginLeft = 10; 
 
       chart.categoryField = "month"; 
 
       chart.dataDateFormat = "MMMM"; 
 

 
       // listen for "dataUpdated" event (fired when chart is inited) and call zoomChart method when it happens 
 
       chart.addListener("dataUpdated", zoomChart); 
 

 
       // AXES 
 
       // category 
 
       var categoryAxis = chart.categoryAxis; 
 
       categoryAxis.parseDates = false; // as our data is date-based, we set parseDates to true 
 
       categoryAxis.minPeriod = "MM"; // our data is yearly, so we set minPeriod to YYYY 
 
       categoryAxis.dashLength = 3; 
 
       categoryAxis.minorGridEnabled = true; 
 
       categoryAxis.minorGridAlpha = 0.1; 
 

 
       // value 
 
       var valueAxis = new AmCharts.ValueAxis(); 
 
       valueAxis.axisAlpha = 0; 
 
       valueAxis.inside = true; 
 
       valueAxis.dashLength = 3; 
 
       chart.addValueAxis(valueAxis); 
 

 
       // GRAPH 
 
       graph = new AmCharts.AmGraph(); 
 
       graph.type = "smoothedLine"; // this line makes the graph smoothed line. 
 
       graph.lineColor = "#d1655d"; 
 
       graph.negativeLineColor = "#637bb6"; // this line makes the graph to change color when it drops below 0 
 
       graph.bullet = "round"; 
 
       graph.bulletSize = 8; 
 
       graph.bulletBorderColor = "#FFFFFF"; 
 
       graph.bulletBorderAlpha = 1; 
 
       graph.bulletBorderThickness = 2; 
 
       graph.lineThickness = 2; 
 
       graph.valueField = "lead"; 
 
       graph.balloonText = "[[category]]<br><b><span style='font-size:14px;'>[[value]]</span></b>"; 
 
       chart.addGraph(graph); 
 
       
 
       // Customer GRAPH 
 
       graph2 = new AmCharts.AmGraph(); 
 
       graph2.type = "smoothedLine"; // this line makes the graph smoothed line. 
 
       graph2.lineColor = "#225F6A"; 
 
       graph2.negativeLineColor = "#637bb6"; // this line makes the graph to change color when it drops below 0 
 
       graph2.bullet = "round"; 
 
       graph2.bulletSize = 8; 
 
       graph2.bulletBorderColor = "#FFFFFF"; 
 
       graph2.bulletBorderAlpha = 1; 
 
       graph2.bulletBorderThickness = 2; 
 
       graph2.lineThickness = 2; 
 
       graph2.valueField = "customer"; 
 
       graph2.balloonText = "[[category]]<br><b><span style='font-size:14px;'>[[value]]</span></b>"; 
 
       chart.addGraph(graph2); 
 

 
       // CURSOR 
 
       var chartCursor = new AmCharts.ChartCursor(); 
 
       chartCursor.cursorAlpha = 0; 
 
       chartCursor.cursorPosition = "mouse"; 
 
//    chartCursor.categoryBalloonDateFormat = "YYYY"; 
 
       chart.addChartCursor(chartCursor); 
 

 
       // SCROLLBAR 
 
       var chartScrollbar = new AmCharts.ChartScrollbar(); 
 
       chart.addChartScrollbar(chartScrollbar); 
 

 
       chart.creditsPosition = "bottom-right"; 
 

 
       // WRITE 
 
       chart.write("leadsgrowth"); 
 
      }); 
 

 
      // this method is called when chart is first inited as we listen for "dataUpdated" event 
 
      function zoomChart() { 
 
       var monthNames = ["January", "February", "March", "April", "May", "June", 
 
        "July", "August", "September", "October", "November", "December" 
 
        ]; 
 

 
        var d = new Date(); 
 
       // different zoom methods can be used - zoomToIndexes, zoomToDates, zoomToCategoryValues 
 
       chart.zoomToCategoryValues(monthNames[d.getMonth()], monthNames[d.getMonth()-12]); 
 
      } 
 
    </script><?PHP echo load_dashboard_leads();?> 
 
<div id="leadsgrowth" style="width:100%; height:400px;"></div>

Answer 1

настоятельно рекомендую вам начать проецирование из пакета в AmCharts сайта и загрузке образцах, которые подготавливают к работе в автономном режиме ...

при определении названия и идентификатора diffrent имени его работал

 var durationGraph1 = new AmCharts.AmGraph(); 
     durationGraph1.id = "g1"; 
     durationGraph1.title = "g1"; 
     durationGraph1.valueField = "value1"; 
     chart.addGraph(durationGraph1); 

     var durationGraph2 = new AmCharts.AmGraph(); 
     durationGraph2.id = "g2"; 
      durationGraph2.title = "g2"; 
      durationGraph2.valueField = "value2"; 
      chart.addGraph(durationGraph2); 

затем использовать:

chartData.push({ 
          date: d3,      
          date2: strdate , 
          value1: distance, 
          value2: distance2 
         }); 

в функции, которые генерируют числа

, если вы хотите иметь анимацию на нем необходимо установить:

.amcharts-graph-g2 { 
    stroke-linejoin: round; 
    stroke-linecap: round; 
    stroke-dasharray: 500%; 
    stroke-dasharray: 0 \0/; /* fixes IE prob */ 
    stroke-dashoffset: 0 \0/; /* fixes IE prob */ 
    -webkit-animation: am-draw 40s; 
    animation: am-draw 40s; 
} 
      .amcharts-graph-g22 { 
    stroke-linejoin: round; 
    stroke-linecap: round; 
    stroke-dasharray: 500%; 
    stroke-dasharray: 0 \0/; /* fixes IE prob */ 
    stroke-dashoffset: 0 \0/; /* fixes IE prob */ 
    -webkit-animation: am-draw 40s; 
    animation: am-draw 40s; 
} 

Answer 2

один способ решить эту проблему: обновление до последней версии AMCharts версии 3

как

https://www.amcharts.com/demos/duration-on-value-axis/?theme=black