Визуализация линейного графика по всей области построения

Question

Линейный график Highcharts, как визуализировать через область графика.

Попытка визуализации линейного графика с использованием библиотеки HighCharts для охвата всей области построения.С помощью xAxis.min удалось убедиться, что начало в xAxis начинается с 0, однако не удалось выяснить, как его завершить в том месте, где заканчивается область графика.

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

  "chart": {
    "margin": null,
    "stacking": "normal",
    "height": "250px",
    "animation": false,
    "events": {}
 },
  "plotOptions": {
    "series": {
     "dataLabels": {
       "enabled": true,
       "inside": true,
       "align": "right",
       "format": "",
       "style": {}
     },
     "inside": true
   }
 },
"title": {
  "text": null
 },
 "subtitle": {
   "text": null
 },
 "xAxis": {
   "title": {
     "text": null,
     "align": "high",
     "rotation": 0,
     "style": {},
     "y": null,
     "x": null
   },
   "plotLines": [],
   "categories": [
     "2019-06-10",
     "2019-06-17"
   ],
   "tickInterval": 1,
   "tickPositions": [
     1
   ],
   "labels": {
     "style": {},
     "useHTML": true,
     "align": ""
   },
   min: 0.5
 },
 "legend": {
   "enabled": true,
   "layout": "horizontal",
   "align": "center",
   "verticalAlign": "bottom",
   "floating": false,
   "x": 0,
   "y": 0,
   "symbolPadding": null,
   "symbolRadius": null,
   "itemStyle": {},
   "itemDistance": null
 },
 "yAxis": [{
   "title": {
     "text": "",
     "align": "high",
     "rotation": 0,
     "style": {}
   },
   "labels": {
     "format": "{value}",
     "style": {}
   },
   "opposite": false,
   "yAxis": 0,
   "lineWidth": 1,
   "gridLineColor": "#e6e6e6",
   "gridLineWidth": 1,
   "gridLineDashStyle": "solid",
   "index": 0
 }],
  "tooltip": {
   "enabled": true,
   "followPointer": false,
   "shared": false
 },
 "credits": {
   "enabled": false
 },
 "series": [{
   "type": "line",
   "name": null,
   "fillOpacity": 0,
   "color": "#0077bc",
   "fillColor": "#0077bc",
   "opposite": false,
   "yAxis": 0,
   "legendIndex": 1,
   "marker": {
     "enabled": true
   },
   "dashStyle": "Solid",
   "data": [{
       "y": 396,
       "toolTipData": "<div>Times on Air : 396</div><br/>"
     },
     {
       "y": 468,
       "toolTipData": "<div>Times on Air : 468</div><br/>"
     }
   ],
   "_symbolIndex": 0
  }]

 });
});

https://jsfiddle.net/fzg0evns/

Answer 1

Вместо того, чтобы использовать даты в качестве категорий оси x, вы можете добавить свойство даты в точку x и определить ось x type = "datetime". Проверьте демоверсию, размещенную ниже.

Код:

"xAxis": {
  "type": "datetime",
  ...
},
"series": [{
    ...
  "data": [{
      "y": 396,
      "x": new Date('2019-06-10').getTime(),
      "toolTipData": "<div>Times on Air : 396</div><br/>"
    },
    {
      "y": 468,
      "x": new Date('2019-06-17').getTime(),
      "toolTipData": "<div>Times on Air : 468</div><br/>"
    }
  ]
}]

Демо-версия:

• https://jsfiddle.net/BlackLabel/jqfyghr2/

Справочник по API:

• https://api.highcharts.com/highcharts/xAxis.type

• https://api.highcharts.com/highcharts/series.line.data.x