Saya ingin membuat bagan tinggimasukkan deskripsi gambar di sini

0
sunil 17 Agustus 2017, 09:30

2 jawaban

Jawaban Terbaik

Saya telah memperbaiki kode Anda dan membuat contoh untuk Anda di bawah ini. Masalah utama Anda adalah bahwa Anda memformat posisi centang sama dengan poin Anda. Dan karena beberapa poin Anda sangat berdekatan, kutu akan berada di atas satu sama lain.

Saya juga telah mengambil kebebasan untuk melakukan beberapa perubahan pada data Anda agar terlihat lebih bagus.

Dalam contoh saya membuat dua seri, dan saya mengubah penskalaan bilah untuk menunjukkan 2010, 2020 dan 2030 sesuai contoh Anda. Ini dilakukan dengan kode berikut:

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

Yaitu, mengatur min dan max sehingga tick disertakan, dan menentukan tick per dekade.

Contoh lengkap di sini:

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>
0
ewolden 17 Agustus 2017, 07:10

Saya telah menyiapkan example serupa dengan apa yang disajikan pada gambar yang disediakan. Semoga membantu.

Referensi API:
http://api.highcharts.com/highcharts/legend

Contoh:
http://jsfiddle.net/760qfdm0/

0
pawel_d 17 Agustus 2017, 12:16