Pertanyaan Stock timeline kronologi dan bidang tanggal kiri sejajar dengan grafik


Saya perlu panduan membuat bagan saya seperti yang ditunjukkan pada tangkapan layar terlampir. Saya telah menggunakan HighCharts untuk tujuan ini, tetapi tidak dapat menemukan opsi atau konfigurasi yang sesuai untuk melakukannya. Berikut ini adalah screen shot desain yang dibutuhkan saya:

enter image description here

Saya juga melampirkan link biola ke implementasi saya saat ini yang saya gunakan untuk mencapai persyaratan desain ini.

Fiddle saya

HTML:

<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="https://code.highcharts.com/stock/highstock.js"></script>
<script src="https://code.highcharts.com/stock/modules/exporting.js"></script>
<div id="container" style="height: 400px; min-width: 310px"></div>

JavaScript:

Highcharts.stockChart('container', {
  chart: {
    spacingLeft: 200,
  },
  navigator: {
    enabled: false
  },
  scrollbar: {
    enabled: false
  },
  title : {
    text : 'Activity'
  },
  rangeSelector: {
    allButtonsEnabled: true,
    buttons: [{
      type: 'month',
      count: 3,
      text: 'Daily',
      dataGrouping: {
        forced: true,
        units: [['day', [1]]]
      }
    }, {
      type: 'year',
      count: 1,
      text: 'Weekly',
      dataGrouping: {
        forced: true,
        units: [['week', [1]]]
      }
    }, {
      type: 'all',
      text: 'Monthly',
      dataGrouping: {
        forced: true,
        units: [['month', [1]]]
      }
    }],
    buttonTheme: {
      width: 60
    },
    selected: 2
  },
  legend: {
    enable: true,
    align: 'left',
    verticalAlign: 'top',
    layout: 'vertical',
    x: 0,
    y: 100
  },
  xAxis: {
    type: 'datetime',
    dateTimeLabelFormats: {
      month: '%e. %b',
      year: '%b'
    }
  },
  series: [{
    name: 'Label 1',
    color: "#00aade",
    data: [[1501545600000, 5], [1504224000000,4], [1506816000000, 6],[1509494400000,5]]
  },
  {
    name: 'Label 2',
    color: "#8cc63e",
    data: [[1501545600000, 1], [1504224000000,0], [1506816000000, 2],[1509494400000,0]]
  }]
});

Mohon jika seseorang dapat membimbing saya dalam melakukan konfigurasi atau gaya yang tepat untuk mencapai hal ini.

Terima kasih.


4
2017-12-13 07:09


asal


Jawaban:


Ini yang paling dekat yang bisa saya dapatkan

http://jsfiddle.net/0yax1bav/5/

Tambahkan spasi di sebelah kiri:

chart: {
    spacingLeft: 300,
},

Pindahkan legenda ke kiri:

legend: {
    enabled: true,
    align: 'left',
    verticalAlign: 'top',
    layout: 'vertical',
    x: -250,
    y: 150
},

Pindahkan judul ke kiri:

title : {
    align: 'left',
    x: -280,
    text : 'Activity',
    floating: true
},

Pindahkan rentang ke kiri:

rangeSelector: {
    floating: true,
    x: 0,
    verticalAlign: 'middle',
    buttonPosition: {
        align: 'left',
        y: 20,
        x: -140
    },
    inputPosition: {
        align: 'left',
        y: 15,
        x: -280
    },
    ...

Nonaktifkan tombol ekspor:

exporting:{
    buttons:{
        contextButton: {
            enabled: false
        }
    }
}

Highcharts.stockChart('container', {
  chart: {
    spacingLeft: 300,
  },
  legend: {
        enabled: true,
        align: 'left',
        verticalAlign: 'top',
        layout: 'vertical',
        x: -250,
        y: 150
    },
  navigator: {
    enabled: false
  },
  scrollbar: {
    enabled: false
  },
  exporting:{
    buttons:{
        contextButton: {
            enabled: false
        }
    }
  },
  title : {
    align: 'left',
    x: -280,
    text : 'Activity',
    floating: true
  },
  rangeSelector: {
    floating: true,
    x: 0,
    verticalAlign: 'middle',
    buttonPosition: {
            align: 'left',
            y: 20,
            x: -140
        },
    inputPosition: {
           align: 'left',
           y: 15,
           x: -280
    },
    allButtonsEnabled: true,
    buttons: [{
      type: 'month',
      count: 3,
      text: 'Daily',
      dataGrouping: {
        forced: true,
        units: [['day', [1]]]
      }
    }, {
      type: 'year',
      count: 1,
      text: 'Weekly',
      dataGrouping: {
        forced: true,
        units: [['week', [1]]]
      }
    }, {
      type: 'all',
      text: 'Monthly',
      dataGrouping: {
        forced: true,
        units: [['month', [1]]]
      }
    }],
    buttonTheme: {
      width: 60
    },
    selected: 2
  },
  xAxis: {
    type: 'datetime',
    dateTimeLabelFormats: {
      month: '%e. %b',
      year: '%b'
    }
  },
  series: [{
    name: 'Label 1',
    color: "#00aade",
    data: [[1501545600000, 5], [1504224000000,4], [1506816000000, 6],[1509494400000,5]]
  },
  {
    name: 'Label 2',
    color: "#8cc63e",
    data: [[1501545600000, 1], [1504224000000,0], [1506816000000, 2],[1509494400000,0]]
  }]
});

1
2017-12-13 09:14



Saya bisa mendapatkannya sejauh ini. Highcharts x, y koordinat agak sulit untuk digunakan, tetapi Anda perlu melakukan sedikit lebih gaya buttonPosition,inputPosition, dan Title  (lihat screenshot) untuk memindahkannya ke sisi kanan:

HTML:

<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="https://code.highcharts.com/stock/highstock.js"></script>
<script src="https://code.highcharts.com/stock/modules/exporting.js">
</script>
<div id="container" style="height: 400px; min-width: 310px"></div>

JavaScript:

Highcharts.stockChart('container', {
  chart: {
    marginLeft: 300,
  },
  navigator: {
    enabled: false
  },
  scrollbar: {
    enabled: false
  },
  title : {
    text : 'Activity',
    x: -280
  },
  rangeSelector: {
    x: 0,
    verticalAlign: 'middle',
    buttonPosition: {
            align: 'left',
            y: 20,
            x: -140
        },
    inputPosition: {
           align: 'left',
           y: 15,
           x: -280
    },
    allButtonsEnabled: true,
    buttons: [{
      type: 'month',
      count: 3,
      text: 'Daily',
      dataGrouping: {
        forced: true,
        units: [['day', [1]]]
      }
    }, {
      type: 'year',
      count: 1,
      text: 'Weekly',
      dataGrouping: {
        forced: true,
        units: [['week', [1]]]
      }
    }, {
      type: 'all',
      text: 'Monthly',
      dataGrouping: {
        forced: true,
        units: [['month', [1]]]
      }
    }],
    buttonTheme: {
      width: 60
    },
    selected: 2
  },


  legend: {
        width: 100,
        align: 'left',
        x: 0, // = marginLeft - default spacingLeft
        y: -100,
        itemWidth: 100,
        borderWidth: 1
  },
  xAxis: {
    type: 'datetime',
    dateTimeLabelFormats: {
      month: '%e. %b',
      year: '%b'
    }
  },
  series: [{
    name: 'Label 1',
    color: "#00aade",
    data: [[1501545600000, 5], [1504224000000,4], [1506816000000, 6],[1509494400000,5]]
  },
  {
    name: 'Label 2',
    color: "#8cc63e",
    data: [[1501545600000, 1], [1504224000000,0], [1506816000000, 2],[1509494400000,0]]
  }]
});

Legenda tampaknya tidak menjadi render - periksa untuk memastikan bahwa data Anda dalam format yang tepat dan juga mencoba bermain-main dengan x dan y.


1
2017-12-13 09:10