Amcharts 4 - Плавающая гистограмма с датами в обеих осях - PullRequest
Новая
       12

Amcharts 4 - Плавающая гистограмма с датами в обеих осях

0 голосов
/ 28 октября 2019

Я пытаюсь преобразовать свою плавающую гистограмму из amcharts версии 3 в версию 4, я создал 2 версии на codepen, чтобы показать, чего я пытаюсь достичь.

Вот код, над которым работаемверсия 3: 

<!-- Styles -->
<style>
#chartdiv {
  width	: 100%;
  height	: 500px;
}						
</style>

<!-- Resources -->
<script src="https://www.amcharts.com/lib/3/amcharts.js"></script>
<script src="https://www.amcharts.com/lib/3/serial.js"></script>
<script src="https://www.amcharts.com/lib/3/plugins/export/export.min.js"></script>
<link rel="stylesheet" href="https://www.amcharts.com/lib/3/plugins/export/export.css" type="text/css" media="all" />

<!-- Chart code -->
<script>
var chart = AmCharts.makeChart( "chartdiv", {
  "type": "serial",
  "theme": "light",
  "dataDateFormat": "DD-MM-YYYY JJ:NN",
  "dataProvider": [{ 
   pd:"01-10-2019 00:00",
   as:"02-01-2001 06:20",
   ae:"02-01-2001 07:58",
   ad:"1:37",
   an:"RDA",
   fs:"02-01-2001 06:00",
   fe:"02-01-2001 10:56",
   fd:"4:56",
   fn:"RDA,RDN",
   ss:"02-01-2001 08:48",
   se:"02-01-2001 17:10",
   sd:"8:22",
   sn:"FDW",
   s2s:"02-01-2001 14:17",
   s2e:"02-01-2001 17:10",
   s2d:"2:53",
   s2n:"SPOT1"
},
{ 
   pd:"02-10-2019 00:00",
   as:"02-01-2001 05:38",
   ae:"02-01-2001 07:28",
   ad:"1:50",
   an:"RDA",
   fs:"02-01-2001 05:10",
   fe:"02-01-2001 09:02",
   fd:"3:52",
   fn:"RDA,RDN",
   ss:"02-01-2001 07:15",
   se:"02-01-2001 17:42",
   sd:"10:27",
   sn:"FDW",
   s2s:"02-01-2001 14:43",
   s2e:"02-01-2001 17:42",
   s2d:"2:59",
   s2n:"SPOT1"
},
{ 
   pd:"03-10-2019 00:00",
   as:"02-01-2001 06:28",
   ae:"02-01-2001 06:30",
   ad:"0:02",
   an:"TAU",
   fs:"02-01-2001 05:20",
   fe:"02-01-2001 10:20",
   fd:"5:00",
   fn:"RDA,RDN",
   ss:"02-01-2001 07:11",
   se:"02-01-2001 14:28",
   sd:"7:17",
   sn:"FDW",
   s2s:"02-01-2001 09:26",
   s2e:"02-01-2001 14:28",
   s2d:"5:02",
   s2n:"SPOT1"
}],
  "chartCursor": {
    "valueLineEnabled": true,
    "valueLineBalloonEnabled": true
  },
  "chartScrollbar": {
    "updateOnReleaseOnly": true
  },
  "valueAxes": [ {
    "axisAlpha": 0,
    "gridAlpha": 0.1,
    "position": "left",
    "type": "date",
		"parseDates": true
    } ],
  "graphs": [ {
    "fillAlphas": 0.8,
    "openField": "as",
    "type": "column",
    "valueField": "ae",
    "dateFormat": "JJ:NN",
    "balloonText": "GL\nLast Source: [[an]]\nEnd Time: [[value]]\nDuration: [[ad]]",
    "labelPosition":"middle"
  }, {
    "fillAlphas": 0.8,
    "openField": "fs",
    "type": "column",
    "valueField": "fe",
    "dateFormat": "JJ:NN",
    "balloonText": "FDW\nLast Source: [[fn]]\nEnd Time: [[value]]\nDuration: [[fd]]",
    "labelPosition":"middle"
  }, {
    "fillAlphas": 0.8,
    "openField": "ss",
    "type": "column",
    "valueField": "se",
    "dateFormat": "JJ:NN",
    "balloonText": "SPOT 1.0\nLast Source: [[sn]]\nEnd Time: [[value]]\nDuration: [[sd]]",
    "labelPosition":"middle"
  }, {
    "fillAlphas": 0.8,
    "openField": "s2s",
    "type": "column",
    "valueField": "s2e",
    "dateFormat": "JJ:NN",
      "balloonText": "SPOT 2.0\nLast Source: [[s2n]]\nEnd Time: [[value]]\nDuration: [[s2d]]",
    "labelPosition":"middle"
  } ],
  "columnWidth": 0.6,
  "categoryField": "pd",
  "creditsPosition": "bottom-right",
  "categoryAxis": {
    "type": "date",
    "parseDates": true,
    "gridPosition": "start",
    "equalSpacing": true,
    "axisAlpha": 0,
    "gridAlpha": 0.1
  }
} );
</script>

<!-- HTML -->
<div id="chartdiv"></div>

И мой последний сбой в версии 4: 

<!-- Styles -->
<style>
#chartdiv {
  width: 100%;
  height: 500px;
}
</style>

<!-- Resources -->
<script src="https://www.amcharts.com/lib/4/core.js"></script>
<script src="https://www.amcharts.com/lib/4/charts.js"></script>
<script src="https://www.amcharts.com/lib/4/themes/animated.js"></script>

<!-- Chart code -->
<script>
am4core.ready(function() {

// Themes begin
am4core.useTheme(am4themes_animated);
// Themes end

// Create chart instance
var chart = am4core.create("chartdiv", am4charts.XYChart);

chart.dateFormatter.inputDateFormat = "dd-MM-yyyy HH:mm";
chart.cursor = new am4charts.XYCursor();
chart.cursor.lineX.disabled = true;
chart.cursor.lineY.disabled = true;
  
// Add data
//chart.data = eval("["+document.getElementById("P12_CHART_DATA").value+"]");

chart.data = [{ 
   pd:"01-10-2019 00:00",
   as:"02-01-2001 06:20",
   ae:"02-01-2001 07:58",
   ad:"1:37",
   an:"RDA",
   fs:"02-01-2001 06:00",
   fe:"02-01-2001 10:56",
   fd:"4:56",
   fn:"RDA,RDN",
   ss:"02-01-2001 08:48",
   se:"02-01-2001 17:10",
   sd:"8:22",
   sn:"FDW",
   s2s:"02-01-2001 14:17",
   s2e:"02-01-2001 17:10",
   s2d:"2:53",
   s2n:"SPOT1"
},
{ 
   pd:"02-10-2019 00:00",
   as:"02-01-2001 05:38",
   ae:"02-01-2001 07:28",
   ad:"1:50",
   an:"RDA",
   fs:"02-01-2001 05:10",
   fe:"02-01-2001 09:02",
   fd:"3:52",
   fn:"RDA,RDN",
   ss:"02-01-2001 07:15",
   se:"02-01-2001 17:42",
   sd:"10:27",
   sn:"FDW",
   s2s:"02-01-2001 14:43",
   s2e:"02-01-2001 17:42",
   s2d:"2:59",
   s2n:"SPOT1"
},
{ 
   pd:"03-10-2019 00:00",
   as:"02-01-2001 06:28",
   ae:"02-01-2001 06:30",
   ad:"0:02",
   an:"TAU",
   fs:"02-01-2001 05:20",
   fe:"02-01-2001 10:20",
   fd:"5:00",
   fn:"RDA,RDN",
   ss:"02-01-2001 07:11",
   se:"02-01-2001 14:28",
   sd:"7:17",
   sn:"FDW",
   s2s:"02-01-2001 09:26",
   s2e:"02-01-2001 14:28",
   s2d:"5:02",
   s2n:"SPOT1"
}]
    
// Create axes
var categoryAxis = chart.xAxes.push(new am4charts.DateAxis());
categoryAxis.dateFormatter.dateFormat = "dd-MM-yyyy HH:mm";
categoryAxis.startLocation = -0.1;
categoryAxis.endLocation = 1.1;
categoryAxis.dataFields.category = "pd";
categoryAxis.renderer.grid.template.location = 0;
categoryAxis.renderer.minGridDistance = 50;
  
var valueAxis = chart.yAxes.push(new am4charts.DateAxis());
valueAxis.dateFormatter.dateFormat = "dd-MM-yyyy HH:mm";
valueAxis.startLocation = -1.1;
valueAxis.endLocation = 1.1;
valueAxis.baseInterval = {
  "timeUnit": "minute",
  "count": 1
};
  
// Create series
var gl = chart.series.push(new am4charts.ColumnSeries());
gl.dateFormatter.dateFormat = "dd-MM-yyyy HH:mm";
gl.dataFields.dateX = "pd";
gl.dataFields.dateY = "ae";
gl.dataFields.openDateY = "as";
gl.columns.template.tooltipText = "[bold]GL[/]\nLast Source: [bold]{an}[/]\nstarts at {openDateY.formatDate('HH:mm')}\nends at {dateY.formatDate('HH:mm')}";
  

var fdw = chart.series.push(new am4charts.ColumnSeries());
fdw.dateFormatter.dateFormat = "dd-MM-yyyy HH:mm";
fdw.dataFields.dateX = "pd";
fdw.dataFields.openDateY = "fs";
fdw.dataFields.dateY = "fe";
fdw.columns.template.tooltipText = "FDW\nLast Source: [bold]{fn}[/]\nstarts at {openDateY}\nends at {dateY}";

var spot = chart.series.push(new am4charts.ColumnSeries());
spot.dateFormatter.dateFormat = "dd-MM-yyyy HH:mm";
spot.dataFields.dateX = "pd";
spot.dataFields.openDateY = "ss";
spot.dataFields.dateY = "se";
spot.columns.template.tooltipText = "SPOT1\nLast Source: [bold]{sn}[/]\nstarts at {openDateY}\nends at {dateY}";
  
var spot2 = chart.series.push(new am4charts.ColumnSeries());
spot2.dateFormatter.dateFormat = "dd-MM-yyyy HH:mm";
spot2.dataFields.dateX = "pd";
spot2.dataFields.openDateY = "s2s";
spot2.dataFields.dateY = "s2e";
spot2.columns.template.tooltipText = "SPOT2\nLast Source: [bold]{s2n}[/]\nstarts at {openDateY}\nends at {dateY}";
  
// Create scrollbars
chart.scrollbarX = new am4core.Scrollbar();

}); // end am4core.ready()
</script>

<!-- HTML -->
<div id="chartdiv"></div>

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

<!-- Styles -->
<style>
#chartdiv {
  width: 100%;
  height: 500px;
}
</style>

<!-- Resources -->
<script src="https://www.amcharts.com/lib/4/core.js"></script>
<script src="https://www.amcharts.com/lib/4/charts.js"></script>
<script src="https://www.amcharts.com/lib/4/themes/animated.js"></script>

<!-- Chart code -->
<script>
am4core.ready(function() {

// Themes begin
am4core.useTheme(am4themes_animated);
// Themes end

// Create chart instance
var chart = am4core.create("chartdiv", am4charts.XYChart);

chart.dateFormatter.inputDateFormat = "dd-MM-yyyy HH:mm";
chart.cursor = new am4charts.XYCursor();
chart.cursor.lineX.disabled = true;
chart.cursor.lineY.disabled = true;
  
// Add data
//chart.data = eval("["+document.getElementById("P12_CHART_DATA").value+"]");

chart.data = [{ 
   pd:"01-10-2019 00:00",
   as:"02-01-2001 06:20",
   ae:"02-01-2001 07:58",
   ad:"1:37",
   an:"RDA",
   fs:"02-01-2001 06:00",
   fe:"02-01-2001 10:56",
   fd:"4:56",
   fn:"RDA,RDN",
   ss:"02-01-2001 08:48",
   se:"02-01-2001 17:10",
   sd:"8:22",
   sn:"FDW",
   s2s:"02-01-2001 14:17",
   s2e:"02-01-2001 17:10",
   s2d:"2:53",
   s2n:"SPOT1"
},
{ 
   pd:"02-10-2019 00:00",
   as:"02-01-2001 05:38",
   ae:"02-01-2001 07:28",
   ad:"1:50",
   an:"RDA",
   fs:"02-01-2001 05:10",
   fe:"02-01-2001 09:02",
   fd:"3:52",
   fn:"RDA,RDN",
   ss:"02-01-2001 07:15",
   se:"02-01-2001 17:42",
   sd:"10:27",
   sn:"FDW",
   s2s:"02-01-2001 14:43",
   s2e:"02-01-2001 17:42",
   s2d:"2:59",
   s2n:"SPOT1"
},
{ 
   pd:"03-10-2019 00:00",
   as:"02-01-2001 06:28",
   ae:"02-01-2001 06:30",
   ad:"0:02",
   an:"TAU",
   fs:"02-01-2001 05:20",
   fe:"02-01-2001 10:20",
   fd:"5:00",
   fn:"RDA,RDN",
   ss:"02-01-2001 07:11",
   se:"02-01-2001 14:28",
   sd:"7:17",
   sn:"FDW",
   s2s:"02-01-2001 09:26",
   s2e:"02-01-2001 14:28",
   s2d:"5:02",
   s2n:"SPOT1"
}]
    
// Create axes
var categoryAxis = chart.xAxes.push(new am4charts.CategoryAxis());
categoryAxis.startLocation = -0.1;
categoryAxis.endLocation = 1.1;
categoryAxis.dataFields.category = "pd";
categoryAxis.renderer.grid.template.location = 0;
categoryAxis.renderer.minGridDistance = 50;
  
var valueAxis = chart.yAxes.push(new am4charts.DateAxis());
valueAxis.dateFormatter.dateFormat = "dd-MM-yyyy HH:mm";
valueAxis.startLocation = -1.1;
valueAxis.endLocation = 1.1;
valueAxis.baseInterval = {
  "timeUnit": "minute",
  "count": 1
};
  
// Create series
var gl = chart.series.push(new am4charts.ColumnSeries());
gl.dateFormatter.dateFormat = "dd-MM-yyyy HH:mm";
gl.dataFields.categoryX = "pd";
gl.dataFields.dateY = "ae";
gl.dataFields.openDateY = "as";
gl.columns.template.tooltipText = "[bold]GL[/]\nLast Source: [bold]{an}[/]\nstarts at {openDateY.formatDate('HH:mm')}\nends at {dateY.formatDate('HH:mm')}";
  

var fdw = chart.series.push(new am4charts.ColumnSeries());
fdw.dateFormatter.dateFormat = "dd-MM-yyyy HH:mm";
fdw.dataFields.categoryX = "pd";
fdw.dataFields.openDateY = "fs";
fdw.dataFields.dateY = "fe";
fdw.columns.template.tooltipText = "FDW\nLast Source: [bold]{fn}[/]\nstarts at {openDateY}\nends at {dateY}";

var spot = chart.series.push(new am4charts.ColumnSeries());
spot.dateFormatter.dateFormat = "dd-MM-yyyy HH:mm";
spot.dataFields.categoryX = "pd";
spot.dataFields.openDateY = "ss";
spot.dataFields.dateY = "se";
spot.columns.template.tooltipText = "SPOT1\nLast Source: [bold]{sn}[/]\nstarts at {openDateY}\nends at {dateY}";
  
var spot2 = chart.series.push(new am4charts.ColumnSeries());
spot2.dateFormatter.dateFormat = "dd-MM-yyyy HH:mm";
spot2.dataFields.categoryX = "pd";
spot2.dataFields.openDateY = "s2s";
spot2.dataFields.dateY = "s2e";
spot2.columns.template.tooltipText = "SPOT2\nLast Source: [bold]{s2n}[/]\nstarts at {openDateY}\nends at {dateY}";
  
// Create scrollbars
chart.scrollbarX = new am4core.Scrollbar();

}); // end am4core.ready()
</script>

<!-- HTML -->
<div id="chartdiv"></div>

Я возился с этим в течение нескольких дней, и я собираюсь сдаться и сохранить свой график версии 3, который выглядит великолепно, но теперь я действительно хотел быпоймите, что я делаю не так, ваша помощь очень ценится.

...