组合堆叠分组和线

时间:2018-05-10 19:27:24

标签: highcharts

我正在尝试生成一个包含堆积和分组条形图和折线图的图形。问题是,当我启用折线图时,条形图会折叠成每个组的单个条形图。

{
"chart": {
"renderTo": "chart",
"zoomType": "xy"
},
"credits": {
"enabled": false
},
"legend": {
"enabled": true,
"verticalAlign": "bottom"
},
"navigator": {
"enabled": true,
"xAxis": {
  "type": "datetime"
}
},
"plotOptions": {
"column": {
  "stacking": "normal"
},
"series": {
  "events": {},
  "groupPadding": 0.2
}
},
"pumplog": {
"id": "000001",
"tz": "US/Pacific"
},
"rangeSelector": {
"enabled": true,
"buttons": [
  {
    "type": "minute",
    "count": 360,
    "text": "6h",
    "_range": 21600000,
    "_offsetMin": 0,
    "_offsetMax": 0
  },
  {
    "type": "day",
    "count": 1,
    "text": "1d",
    "_range": 86400000,
    "_offsetMin": 0,
    "_offsetMax": 0
  },
  {
    "type": "week",
    "count": 1,
    "text": "1w",
    "_range": 604800000,
    "_offsetMin": 0,
    "_offsetMax": 0
  },
  {
    "type": "month",
    "count": 1,
    "text": "1m",
    "_range": 2592000000,
    "_offsetMin": 0,
    "_offsetMax": 0
  },
  {
    "type": "month",
    "count": 3,
    "text": "3m",
    "_range": 7776000000,
    "_offsetMin": 0,
    "_offsetMax": 0
  },
  {
    "type": "ytd",
    "text": "ytd",
    "_offsetMin": 0,
    "_offsetMax": 0,
    "_range": null
  },
  {
    "type": "year",
    "count": 1,
    "text": "1y",
    "_range": 31536000000,
    "_offsetMin": 0,
    "_offsetMax": 0
  },
  {
    "type": "all",
    "text": "All",
    "_offsetMin": 0,
    "_offsetMax": 0,
    "_range": null
  }
]
},
"scrollbar": {
"enabled": true
},
"title": {
"text": "17-1 Almonds"
},
"tooltip": {
"shared": true
},
"xAxis": {
"type": "datetime",
"title": {
  "text": null
},
"labels": {
  "rotation": 0,
  "autoRotation": [
    -45
  ]
},
"events": {}
},
"yAxis": [
{
  "title": {
    "text": "WeekEt"
  },
  "index": 0
},
{
  "opposite": true,
  "title": {
    "text": "DayIrr - DayRain - DayEt"
  },
  "index": 1
}
],
"series": [
{
  "data": [
     //Lots of pairs here
  ],
  "name": "DayIrr",
  "psdescription": {
    "status": "",
    "field": "dayIrr",
    "prefix": "",
    "group": "Daily",
    "name": "Day Irrigation",
    "text": "",
    "shortname": "DayIrr",
    "suffix": "in"
  },
  "psnormalizations": null,
  "type": "column",
  "crisp": false,
  "stack": "IN",
  "marker": {
    "enabled": false
  },
  "visible": true,
  "yAxis": 1,
  "_colorIndex": 0
},
{
  "data": [
    //lots of pairs here
  ],
  "name": "DayRain",
  "psdescription": {
    "status": "",
    "field": "dayRain",
    "prefix": "",
    "group": "Daily",
    "name": "Day Rain",
    "text": "",
    "shortname": "DayRain",
    "suffix": "in"
  },
  "psnormalizations": null,
  "type": "column",
  "crisp": false,
  "stack": "IN",
  "marker": {
    "enabled": false
  },
  "visible": true,
  "yAxis": 1,
  "_colorIndex": 1
},
{
  "data": [
    //lots of pairs here
  ],
  "name": "DayEt",
  "psdescription": {
    "status": "",
    "field": "dayET",
    "prefix": "",
    "group": "Daily",
    "name": "Day ET",
    "text": "",
    "shortname": "DayEt",
    "suffix": "in"
  },
  "psnormalizations": null,
  "type": "column",
  "crisp": false,
  "stack": "OUT",
  "marker": {
    "enabled": false
  },
  "visible": true,
  "yAxis": 1,
  "_colorIndex": 2
},
{
  "data": [
     //lots of pairs here
  ],
  "name": "WeekEt",
  "psdescription": {
    "status": "",
    "field": "weekET",
    "prefix": "",
    "group": "Weekly",
    "name": "Week ET",
    "text": "",
    "shortname": "WeekEt",
    "suffix": "in"
  },
  "psnormalizations": null,
  "type": "line",
  "crisp": false,
  "marker": {
    "enabled": false
  },
  "visible": true,
  "yAxis": 0,
  "_colorIndex": 3,
  "_symbolIndex": 0
}
],
"exporting": {
"chartOptions": {
  "plotOptions": {
    "series": {
      "dataLabels": {}
    }
  }
},
"scale": 3,
"fallbackToExportServer": false,
"sourceHeight": 800,
"sourceWidth": 1600
}

http://jsfiddle.net/pumpsight/qrdtx3z8/1/

如果禁用折线图(将weekET可见为false),条形图看起来就像我期望的那样。

我尝试调整groupPadding和pointWidth没有效果。

由于

1 个答案:

答案 0 :(得分:0)

此问题已在此处报告:https://github.com/highcharts/highcharts/issues/7519

由线序列中两点之间的最近距离(一秒差)引起。如果您想每天显示2个堆栈,请使用24小时点范围:

pointRange: 12 * 3600 * 1000

现场演示: http://jsfiddle.net/BlackLabel/4okpr4v8/

相关问题