在 AmCharts v4 烛台图表上禁用堆叠蜡烛

Question

我正在构建一个以小时为单位的简单烛台图表。我想出了避免使用“dateFormat”和“inputDateFormat”参数在同一天内对蜡烛进行分组的方法。出于某种原因，根据数据集，它并不总是有效。下面两个示例仅在数据集 (chart.data) 上有所不同。知道什么地方出了问题吗？谢谢

<script src="https://cdn.amcharts.com/lib/4/core.js"></script>
<script src="https://cdn.amcharts.com/lib/4/charts.js"></script>
<script src="https://cdn.amcharts.com/lib/4/themes/animated.js"></script>
<!-- Chart code -->
<script>
am4core.ready(function() {

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

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


// Load data


chart.data=[{"Date":"2020-10-29 12:00:00","Open":"329.21","High":"329.87","Low":"327.82","Close":"328.43","Volume":"9903193"},{"Date":"2020-10-29 11:00:00","Open":"327.87","High":"329.82","Low":"327.11","Close":"329.22","Volume":"14505192"},{"Date":"2020-10-29 10:00:00","Open":"327.08","High":"329.485","Low":"325.09","Close":"327.83","Volume":"11636626"}];

chart.leftAxesContainer.layout = "vertical";
chart.dateFormatter.dateFormat = "yyyy-MM-dd HH:mm:ss";
chart.dateFormatter.inputDateFormat = "yyyy-MM-dd HH:mm:ss";

var dateAxis = chart.xAxes.push(new am4charts.DateAxis());
dateAxis.renderer.grid.template.location = 0;
dateAxis.renderer.minGridDistance = 60;
dateAxis.skipEmptyPeriods=true;

var valueAxis = chart.yAxes.push(new am4charts.ValueAxis());
valueAxis.tooltip.disabled = false;
valueAxis.renderer.grid.template.strokeOpacity = 0;
dateAxis.renderer.grid.template.strokeOpacity = 0;


var series = chart.series.push(new am4charts.CandlestickSeries());
series.dataFields.dateX = "Date";
series.dataFields.openValueY = "Open";
series.dataFields.valueY = "Close";
series.dataFields.lowValueY = "Low";
series.dataFields.highValueY = "High";

//series.tooltipText = "Open: [bold]${openValueY.value}[/]\nLow: [bold]${lowValueY.value}[/]\nHigh: [bold]${highValueY.value}[/]\nClose: [bold]${valueY.value}[/]";
series.connect = true;

series.dropFromOpenState.properties.fill = am4core.color("black");
series.dropFromOpenState.properties.stroke = am4core.color("black");

series.riseFromOpenState.properties.fill = am4core.color("white");
series.riseFromOpenState.properties.stroke = am4core.color("black");

series.riseFromPreviousState.properties.fillOpacity = 0;
series.dropFromPreviousState.properties.fillOpacity = 1;

chart.cursor = new am4charts.XYCursor();

chart.scrollbarX = new am4core.Scrollbar();
}); // end am4core.ready()
</script>
<div id="chartdiv_stock" style="width:100%;height:500px;float:left;" ></div>

<script src="https://cdn.amcharts.com/lib/4/core.js"></script>
<script src="https://cdn.amcharts.com/lib/4/charts.js"></script>
<script src="https://cdn.amcharts.com/lib/4/themes/animated.js"></script>
<!-- Chart code -->
<script>
am4core.ready(function() {

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

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


// Load data
chart.data=[{"Date":"2020-12-04 15:00:00","Open":"368.74","High":"369.28","Low":"368.55","Close":"369.2","Volume":"4558835"},{"Date":"2020-12-04 16:00:00","Open":"369.2","High":"369.85","Low":"368.67","Close":"369.83","Volume":"13766958"},{"Date":"2020-12-04 17:00:00","Open":"369.82","High":"369.94","Low":"368.94","Close":"369.01","Volume":"7618573"},{"Date":"2020-12-04 18:00:00","Open":"369","High":"369.85","Low":"369","Close":"369.15","Volume":"413998"},{"Date":"2020-12-04 19:00:00","Open":"369.15","High":"369.34","Low":"369.11","Close":"369.19","Volume":"38254"},{"Date":"2020-12-04 20:00:00","Open":"369.21","High":"369.25","Low":"369.14","Close":"369.22","Volume":"22622"}];


chart.leftAxesContainer.layout = "vertical";
chart.dateFormatter.dateFormat = "yyyy-MM-dd HH:mm:ss";
chart.dateFormatter.inputDateFormat = "yyyy-MM-dd HH:mm:ss";

var dateAxis = chart.xAxes.push(new am4charts.DateAxis());
dateAxis.renderer.grid.template.location = 0;
dateAxis.renderer.minGridDistance = 60;
dateAxis.skipEmptyPeriods=true;

var valueAxis = chart.yAxes.push(new am4charts.ValueAxis());
valueAxis.tooltip.disabled = false;
valueAxis.renderer.grid.template.strokeOpacity = 0;
dateAxis.renderer.grid.template.strokeOpacity = 0;


var series = chart.series.push(new am4charts.CandlestickSeries());
series.dataFields.dateX = "Date";
series.dataFields.openValueY = "Open";
series.dataFields.valueY = "Close";
series.dataFields.lowValueY = "Low";
series.dataFields.highValueY = "High";

//series.tooltipText = "Open: [bold]${openValueY.value}[/]\nLow: [bold]${lowValueY.value}[/]\nHigh: [bold]${highValueY.value}[/]\nClose: [bold]${valueY.value}[/]";
series.connect = true;

series.dropFromOpenState.properties.fill = am4core.color("black");
series.dropFromOpenState.properties.stroke = am4core.color("black");

series.riseFromOpenState.properties.fill = am4core.color("white");
series.riseFromOpenState.properties.stroke = am4core.color("black");

series.riseFromPreviousState.properties.fillOpacity = 0;
series.dropFromPreviousState.properties.fillOpacity = 1;

chart.cursor = new am4charts.XYCursor();

chart.scrollbarX = new am4core.Scrollbar();
}); // end am4core.ready()
</script>
<div id="chartdiv_stock" style="width:100%;height:500px;float:left;" ></div>

Answer 1

这似乎是由于排序的原因，“不工作”的情况下数据降序。更改为升序解决了问题。

在 AmCharts v4 烛台图表上禁用堆叠蜡烛

Disabling stacking candles on AmCharts v4 Candlestick chart

candlestick-chart

amcharts4