在 AmChart 上显示每日和每周数据答案

【问题标题】：Display daily and weekly data on AmChart在 AmChart 上显示每日和每周数据
【发布时间】：2021-09-09 18:02:00
【问题描述】：

大家好

我一直在浏览网络和 AmChart 文档，但找不到一个好的解决方案。我想显示每日烛台数据，并在其下显示相应的每周烛台数据。

我可以让它工作，但它看起来不正确。由于每周的蜡烛较少，我希望它们占据更多的水平空间，或类似的东西。

我发现了一些有用的属性，例如比例，但它可以水平和垂直缩放。

有没有人有任何提示或优雅的解决方案来在彼此下方显示每日和每周烛台？

这是我一直在摆弄的一些代码。

am4core.ready(function() {

var chart = am4core.create("chartdiv", am4charts.XYChart);
//chart.paddingRight = 10;

chart.leftAxesContainer.layout = "vertical"; // stacks charts vertically

chart.dateFormatter.inputDateFormat = "yyyy-MM-dd";

var dateAxis = chart.xAxes.push(new am4charts.DateAxis());
dateAxis.skipEmptyPeriods = true; // no gaps inbetween candles

// base granularity for the data
dateAxis.baseInterval =
{
    timeUnit: 'day',
    count: 1
};

// base granularity for the grid lines
dateAxis.gridIntervals.setAll([
    { timeUnit: 'week' , count: 1 },
    { timeUnit: 'week' , count: 5 }
]);

dateAxis.paddingRight = '36px'; // creates a little space on the right of the data
dateAxis.endLocation = 1; // creates a little space on the right of the data

var valueAxis = chart.yAxes.push(new am4charts.ValueAxis());
valueAxis.height = am4core.percent(50);
valueAxis.tooltip.disabled = true;

var series = chart.series.push(new am4charts.CandlestickSeries());

series.dataFields.dateX = "date";
series.dataFields.valueY = "close";
series.dataFields.openValueY = "open";
series.dataFields.lowValueY = "low";
series.dataFields.highValueY = "high";
series.xAxis = dateAxis;
series.yAxis = valueAxis;
series.simplifiedProcessing = true;
series.clustered = false;



var dateAxis2 = chart.xAxes.push(new am4charts.DateAxis());
dateAxis2.skipEmptyPeriods = true; // no gaps inbetween candles

// base granularity for the data
dateAxis2.baseInterval =
{
    timeUnit: 'week',
    count: 1
};

// base granularity for the grid lines
dateAxis2.gridIntervals.setAll([
    { timeUnit: 'week' , count: 1 },
    { timeUnit: 'week' , count: 5 }
]);

dateAxis2.paddingRight = '0px'; // creates a little space on the right of the data
dateAxis2.endLocation = 1; // creates a little space on the right of the data

var valueAxis2 = chart.yAxes.push(new am4charts.ValueAxis());
valueAxis2.height = am4core.percent(50);
valueAxis2.marginTop = '40px';
valueAxis2.tooltip.disabled = true;

var series2 = chart.series.push(new am4charts.CandlestickSeries());
series2.dataFields.dateX = "date";
series2.dataFields.valueY = "close2";
series2.dataFields.openValueY = "open2";
series2.dataFields.lowValueY = "low2";
series2.dataFields.highValueY = "high2";
series2.xAxis = dateAxis2;
series2.yAxis = valueAxis2;
series2.simplifiedProcessing = true;
series2.clustered = false;

chart.cursor = new am4charts.XYCursor();

chart.data = [ {
    "date": "2019-12-30",
    "open": "136.65",
    "high": "136.96",
    "low": "134.15",
    "close": "136.49",
    "open2": "136.65",
    "high2": "137.24",
    "low2": "134.15",
    "close2": "135.03"
  }, {
    "date": "2019-12-31", "open": "135.26", "high": "135.95", "low": "131.50", "close": "131.85"
  }, {
    "date": "2020-01-02", "open": "132.90", "high": "135.27", "low": "128.30", "close": "135.25"
  }, {
    "date": "2020-01-03", "open": "134.94", "high": "137.24", "low": "132.63", "close": "135.03"
  }, {
    "date": "2020-01-06",
    "open": "136.76",
    "high": "136.86",
    "low": "132.00",
    "close": "134.01",
    "open2": "136.76",
    "high2": "136.86",
    "low2": "125.09",
    "close2": "124.03"
  }, {
    "date": "2020-01-07", "open": "131.11", "high": "133.00", "low": "125.09", "close": "126.39"
  }, {
    "date": "2020-01-08", "open": "123.12", "high": "127.75", "low": "120.30", "close": "125.00"
  }, {
    "date": "2020-01-09", "open": "128.32", "high": "129.35", "low": "126.50", "close": "127.79"
  }, {
    "date": "2020-01-10", "open": "128.29", "high": "128.30", "low": "123.71", "close": "124.03"
  }, {
    "date": "2020-01-13",
    "open": "122.74",
    "high": "124.86",
    "low": "119.65",
    "close": "119.90",
    "open2": "122.74",
    "high2": "128.96",
    "low2": "111.62",
    "close2": "127.57"
  }, {
    "date": "2020-01-14", "open": "117.01", "high": "118.50", "low": "111.62", "close": "117.05"
  }, {
    "date": "2020-01-15", "open": "122.01", "high": "123.50", "low": "119.82", "close": "122.06"
  }, {
    "date": "2020-01-16", "open": "123.96", "high": "124.50", "low": "120.50", "close": "122.22"
  }, {
    "date": "2020-01-17", "open": "122.21", "high": "128.96", "low": "121.00", "close": "127.57"
  }, {
    "date": "2020-01-20",
    "open": "131.22",
    "high": "132.75",
    "low": "130.33",
    "close": "132.51",
    "open2": "131.22",
    "high2": "135.37",
    "low2": "126.63",
    "close2": "126.82"
  }, {
    "date": "2020-01-21", "open": "133.09", "high": "133.34", "low": "129.76", "close": "131.07"
  }, {
    "date": "2020-01-22", "open": "130.53", "high": "135.37", "low": "129.81", "close": "135.30"
  }, {
    "date": "2020-01-23", "open": "133.39", "high": "134.66", "low": "132.10", "close": "132.25"
  }, {
    "date": "2020-01-24", "open": "130.99", "high": "132.41", "low": "126.63", "close": "126.82"
  }, {
    "date": "2020-01-27",
    "open": "129.88",
    "high": "134.18",
    "low": "129.54",
    "close": "134.08",
    "open2": "129.88",
    "high2": "145.84",
    "low2": "129.54",
    "close2": "136.76"
  }, {
    "date": "2020-01-28", "open": "132.67", "high": "138.25", "low": "132.30", "close": "136.25"
  }, {
    "date": "2020-02-29", "open": "139.49", "high": "139.65", "low": "137.41", "close": "138.48"
  }, {
    "date": "2020-01-30", "open": "139.94", "high": "145.73", "low": "139.84", "close": "144.16"
  }, {
    "date": "2020-01-31", "open": "144.97", "high": "145.84", "low": "136.10", "close": "136.76"
  }, {
    "date": "2020-02-03",
    "open": "135.56",
    "high": "137.57",
    "low": "132.71",
    "close": "135.01",
    "open2": "135.56",
    "high2": "139.40",
    "low2": "130.00",
    "close2": "136.85"
  }, {
    "date": "2020-02-04", "open": "132.01", "high": "132.30", "low": "130.00", "close": "131.77"
  }, {
    "date": "2020-02-05", "open": "136.99", "high": "138.04", "low": "133.95", "close": "136.71"
  }, {
    "date": "2020-02-06", "open": "137.90", "high": "138.30", "low": "133.75", "close": "135.49"
  }, {
    "date": "2020-02-07", "open": "135.99", "high": "139.40", "low": "135.75", "close": "136.85"
  }];
}); // end am4core.ready()

<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="http://www.amcharts.com/lib/4/core.js"></script>
<script src="http://www.amcharts.com/lib/4/charts.js"></script>
</head>
<body>
  <div id="chartdiv" style="width: 50%; height: 500px; background-color: #FFFFFF;"></div>
</body>
</html>

【问题讨论】：

大家好消息...我已经取得了一些进展。这并不完美。我仍在寻找更多建议。我已经从上面编辑了代码 sn-p。当有更多数据时，它似乎工作得更好。我的笔记本电脑上有一个更大的例子，但这很难放在这里。还有其他人有什么有用的建议吗？

标签： javascript amcharts candlestick-chart

【解决方案1】：

我不知道这是否是最好的解决方案。如果有人有更好的解决方案，请告诉我。

您可以在图表中添加多个日期轴。然后当你添加一个系列时，你指定 x 和 y 轴的 id。

所以我为每日蜡烛添加了一个日期轴，为每周蜡烛添加了一个日期轴。他们没有100％排队，但很接近。我的图表有 400 根每日蜡烛，以及等量的每周蜡烛，而且似乎图表越大，看起来越接近所有排列。我还加了一张月线图，还不错。

我还在图表上添加了稍微不同的填充，这让它们更加接近

我删除了日期轴上的所有标签以避免任何混淆。

这是我能想到的最佳解决方案。

【讨论】：