Question

我想创建一个高图表作为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}]}]}

);
});

Answer 1

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

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

在示例中，我制作了两个系列，并根据您的示例更改了条形缩放以显示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以便包含刻度，并指定每十年刻度。

这里有完整的例子：

＆＃13;

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
      }]
    }
  ]
});

＆＃13;

<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>

＆＃13;

Answer 2

我准备了与提供的图片上显示的内容类似的example。希望它有所帮助。

API参考：
http://api.highcharts.com/highcharts/legend

例：
http://jsfiddle.net/760qfdm0/

使用highchart的抵押计算器

2 个答案: