使用 highchart 的抵押贷款计算器

Sunil 发表于 Dev

苏尼尔

我想创建一个像 bankrate.com 创建的高图表

在里面，我想显示本金、余额和利息。它将按年份显示。

我试图创建它，但我无法根据上面的例子对年份进行分组：

$(function () {
 $('#container').highcharts(

    {"chart":{"type":"area"},

     "xAxis":{
        "dateTimeLabelFormats":{"year":"%Y"},
        "type":"datetime",
         labels: {
             formatter: function() {
                 return Highcharts.dateFormat('%Y', this.value);
             }
         },
         tickPositions: [
             Date.UTC(2012, 02, 30), 
             Date.UTC(2015, 02, 30),
             Date.UTC(2019, 02, 30),
             Date.UTC(2019, 02, 1),
             Date.UTC(2021, 06, 4),
             Date.UTC(2021, 03, 7),
             Date.UTC(2021, 07, 5),
             ]
    },      

     "series":[
     {
      pointInterval: 24 * 3600 * 1000,
     "data":[
     {"x":Date.UTC(2012, 02, 30),"y":1998.0},{"x":Date.UTC(2019, 02, 30),"y":22417.0},{"x":Date.UTC(2015, 02, 30),"y":358.0},{"x":Date.UTC(2019, 02, 1),"y":358.0},
     {"x":Date.UTC(2021, 06, 4),"y":1158.0},
     {"x":Date.UTC(2021, 03, 7),"y":2258.0},
     {"x":Date.UTC(2021, 07, 5),"y":45358.0}]}]}

);
});

厄尔登

我已经更正了你的代码，并在下面为你做了一个例子。您的主要问题是您将刻度位置的格式设置为与您的点相同。而且由于您的某些点非常靠近，因此刻度会相互重叠。

我还冒昧地对您的数据进行了一些更改，使其看起来更好。

在示例中，我制作了两个系列，并根据您的示例更改了条形缩放以显示 2010、2020 和 2030。这是通过以下代码完成的：

min: Date.UTC(2010, 01, 01),
max: Date.UTC(2030, 01, 01),
tickPositions: [
  Date.UTC(2010, 01, 01),
  Date.UTC(2020, 01, 01),
  Date.UTC(2030, 01, 01)
]

也就是说，设置 min 和 max 以便包含刻度，并指定每十年一个刻度。

完整示例在这里：

var chart = Highcharts.chart('container', {

  chart: {
    "type": "area"
  },

  xAxis: {
    "dateTimeLabelFormats": {
      "year": "%Y"
    },
    "type": "datetime",
    labels: {
      formatter: function() {
        return Highcharts.dateFormat('%Y', this.value);
      }
    },
    min: Date.UTC(2010, 01, 01),
    max: Date.UTC(2030, 01, 01),
    tickPositions: [
      Date.UTC(2010, 01, 01),
      Date.UTC(2020, 01, 01),
      Date.UTC(2030, 01, 01)
    ]
  },

  series: [{
      name: 'Series1',
      pointInterval: 24 * 3600 * 1000,
      "data": [{
        "x": Date.UTC(2012, 02, 30),
        "y": 1998.0
      }, {
        "x": Date.UTC(2015, 02, 30),
        "y": 358.0
      }, {
        "x": Date.UTC(2019, 02, 1),
        "y": 358.0
      }, {
        "x": Date.UTC(2019, 02, 30),
        "y": 22417.0
      }, {
        "x": Date.UTC(2021, 03, 7),
        "y": 2258.0
      }, {
        "x": Date.UTC(2021, 06, 4),
        "y": 1158.0
      }, {
        "x": Date.UTC(2025, 07, 5),
        "y": 45358.0
      }]
    },
    {
      name: 'Series2',
      pointInterval: 24 * 3600 * 1000,
      "data": [{
        "x": Date.UTC(2012, 02, 30),
        "y": 5.0
      }, {
        "x": Date.UTC(2015, 02, 30),
        "y": 2555.0
      }, {
        "x": Date.UTC(2019, 02, 1),
        "y": 2777.0
      }, {
        "x": Date.UTC(2019, 02, 30),
        "y": 26.0
      }, {
        "x": Date.UTC(2021, 03, 7),
        "y": 25000.0
      }, {
        "x": Date.UTC(2021, 06, 4),
        "y": 21000.0
      }, {
        "x": Date.UTC(2025, 07, 5),
        "y": 30000.0
      }]
    }
  ]
});

<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>

<div id="container" style="height: 400px"></div>

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。