代码之家 › 专栏 › 技术社区 › Naguib Ihab

使用具有堆叠序列的highstock图表

highstock highcharts charts

Naguib Ihab · 技术社区 · 8 年前

我目前有一个highcharts堆叠柱形图,如下所示:

我有太多的数据要放在那个图表里,它看起来很难看,而且不适合宽度:

请注意,我在两个截图中的每一列中都有4种颜色

所以我想使用highstock图表,用户可以放大和缩小数据,例如: https://www.highcharts.com/stock/demo/column

然而,有没有一种方法可以在保持堆叠的同时使用它?

这是 a fiddle 这包含了我的堆积图的一个小样本数据,下面是它的代码:

// Create the chart
Highcharts.chart('container', 
    {
  "chart": {
    "type": "column"
  },
  "title": {
    "text": ""
  },
  "xAxis": {
    "categories": [
      "Start Term 1",
      "Start Term 2",
      "29-Sep",
      "Start Term 3",
      "03-Oct",
      "05-Oct",
      "Start Term 4",
      "12-Oct",
      "20-Oct",
      "23-Oct",
      "30-Oct",
      "17-Nov",
      "21-Nov"
    ],
    "labels": {
      "style": {
        "font-size": "12px"
      },
      "useHTML": true
    }
  },
  "yAxis": {
    "title": {
      "text": "Time (hh:mm)"
    },
    "tickInterval": 600,
    "labels": {},
    "gridLineWidth": 0,
    "plotLines": [
      {
        "value": 0,
        "width": 1,
        "color": "#000",
        "zIndex": 4
      }
    ],
    "tickmarkPlacement": "on"
  },
  "plotOptions": {
    "column": {
      "stacking": "normal",
      "events": {}
    }
  },
  "credits": {
    "enabled": false
  },
  "tooltip": {
    "shared": true,
    "crosshairs": true
  },
  "legend": {
    "align": "right",
    "verticalAlign": "top",
    "itemStyle": {
      "display": "none"
    },
    "title": {
      "text": "Click a colour"
    }
  },
  "series": [
    {
      "name": "On Task Teacher Recommended",
      "data": [
        null,
        null,
        10688,
        null,
        4624,
        4330,
        null,
        5220,
        169,
        5220,
        4330,
        9144,
        4345
      ],
      "color": "#86E067",
      "events": {},
      "point": {
        "events": false
      },
      "customEvents": {
        "series": {},
        "point": {}
      }
    },
    {
      "name": "On Task Student Discovered",
      "data": [
        null,
        null,
        10373,
        null,
        5384,
        5301,
        null,
        5521,
        1002,
        5599,
        5387,
        15535,
        5373
      ],
      "color": "#5CB5E5",
      "events": {},
      "point": {
        "events": false
      },
      "customEvents": {
        "series": {},
        "point": {}
      }
    },
    {
      "name": "Uncategorised",
      "data": [
        null,
        null,
        341,
        null,
        226,
        226,
        null,
        226,
        425,
        2240,
        1281,
        3727,
        1334
      ],
      "color": "#F98157",
      "events": {},
      "point": {
        "events": false
      },
      "customEvents": {
        "series": {},
        "point": {}
      }
    },
    {
      "name": "Off Task",
      "data": [
        null,
        null,
        -18937,
        null,
        -7056,
        -7034,
        null,
        -7163,
        -1271,
        -7208,
        -7091,
        -21658,
        -7050
      ],
      "color": "#E3454D",
      "events": {},
      "point": {
        "events": false
      },
      "customEvents": {
        "series": {},
        "point": {}
      }
    }
  ]
}
);

1 回复 | 直到 8 年前

Deep 3015 8 年前

您可以使用 scrollbars-for-any-axis 添加滚动高图表,如highstock。你必须使用highstock js而不是highcharts js。

你必须使用 max 属性设置要在x轴中看到的列数。

// Create the chart
Highcharts.chart('container', {
  "chart": {
    "type": "column"
  },
  "title": {
    "text": ""
  },
  "xAxis": {
    "categories": [
      "Start Term 1",
      "Start Term 2",
      "29-Sep",
      "Start Term 3",
      "03-Oct",
      "05-Oct",
      "Start Term 4",
      "12-Oct",
      "20-Oct",
      "23-Oct",
      "30-Oct",
      "17-Nov",
      "21-Nov"
    ],
    "labels": {
      "style": {
        "font-size": "12px"
      },
      "useHTML": true
    },
    min: 0,  
    max: 4,  //this is value to be changed based on column number 
    scrollbar: {
      enabled: true
    },
  },
  "yAxis": {
    "title": {
      "text": "Time (hh:mm)"
    },
    "tickInterval": 600,
    "labels": {},
    "gridLineWidth": 0,
    "plotLines": [{
      "value": 0,
      "width": 1,
      "color": "#000",
      "zIndex": 4
    }],
    "tickmarkPlacement": "on",

  },
  "plotOptions": {
    "column": {
      "stacking": "normal",
      "events": {}
    }
  },
  "credits": {
    "enabled": false
  },
  "tooltip": {
    "shared": true,
    "crosshairs": true
  },
  "legend": {
    "align": "right",
    "verticalAlign": "top",
    "itemStyle": {
      "display": "none"
    },
    "title": {
      "text": "Click a colour"
    }
  },
  "series": [{
    "name": "On Task Teacher Recommended",
    "data": [
      null,
      null,
      10688,
      null,
      4624,
      4330,
      null,
      5220,
      169,
      5220,
      4330,
      9144,
      4345
    ],
    "color": "#86E067",
    "events": {},
    "point": {
      "events": false
    },
    "customEvents": {
      "series": {},
      "point": {}
    }
  }, {
    "name": "On Task Student Discovered",
    "data": [
      null,
      null,
      10373,
      null,
      5384,
      5301,
      null,
      5521,
      1002,
      5599,
      5387,
      15535,
      5373
    ],
    "color": "#5CB5E5",
    "events": {},
    "point": {
      "events": false
    },
    "customEvents": {
      "series": {},
      "point": {}
    }
  }, {
    "name": "Uncategorised",
    "data": [
      null,
      null,
      341,
      null,
      226,
      226,
      null,
      226,
      425,
      2240,
      1281,
      3727,
      1334
    ],
    "color": "#F98157",
    "events": {},
    "point": {
      "events": false
    },
    "customEvents": {
      "series": {},
      "point": {}
    }
  }, {
    "name": "Off Task",
    "data": [
      null,
      null, -18937,
      null, -7056, -7034,
      null, -7163, -1271, -7208, -7091, -21658, -7050
    ],
    "color": "#E3454D",
    "events": {},
    "point": {
      "events": false
    },
    "customEvents": {
      "series": {},
      "point": {}
    }
  }]
});

<!--<script src="https://code.highcharts.com/highcharts.js"></script>-->
<script src="https://code.highcharts.com/stock/highstock.js"></script>
<script src="https://code.highcharts.com/modules/data.js"></script>
<script src="https://code.highcharts.com/modules/drilldown.js"></script>

<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>

Fiddle 演示

或

您可以使用 chart.zoomType 缩放图表。

// Create the chart
Highcharts.chart('container', 
    {
  "chart": {
    "type": "column",
    zoomType:'x' //only x axis zoom
  },
  "title": {
    "text": ""
  },
  "xAxis": {
    "categories": [
      "Start Term 1",
      "Start Term 2",
      "29-Sep",
      "Start Term 3",
      "03-Oct",
      "05-Oct",
      "Start Term 4",
      "12-Oct",
      "20-Oct",
      "23-Oct",
      "30-Oct",
      "17-Nov",
      "21-Nov"
    ],
    "labels": {
      "style": {
        "font-size": "12px"
      },
      "useHTML": true
    }
  },
  "yAxis": {
    "title": {
      "text": "Time (hh:mm)"
    },
    "tickInterval": 600,
    "labels": {},
    "gridLineWidth": 0,
    "plotLines": [
      {
        "value": 0,
        "width": 1,
        "color": "#000",
        "zIndex": 4
      }
    ],
    "tickmarkPlacement": "on"
  },
  "plotOptions": {
    "column": {
      "stacking": "normal",
      "events": {}
    }
  },
  "credits": {
    "enabled": false
  },
  "tooltip": {
    "shared": true,
    "crosshairs": true
  },
  "legend": {
    "align": "right",
    "verticalAlign": "top",
    "itemStyle": {
      "display": "none"
    },
    "title": {
      "text": "Click a colour"
    }
  },
  "series": [
    {
      "name": "On Task Teacher Recommended",
      "data": [
        null,
        null,
        10688,
        null,
        4624,
        4330,
        null,
        5220,
        169,
        5220,
        4330,
        9144,
        4345
      ],
      "color": "#86E067",
      "events": {},
      "point": {
        "events": false
      },
      "customEvents": {
        "series": {},
        "point": {}
      }
    },
    {
      "name": "On Task Student Discovered",
      "data": [
        null,
        null,
        10373,
        null,
        5384,
        5301,
        null,
        5521,
        1002,
        5599,
        5387,
        15535,
        5373
      ],
      "color": "#5CB5E5",
      "events": {},
      "point": {
        "events": false
      },
      "customEvents": {
        "series": {},
        "point": {}
      }
    },
    {
      "name": "Uncategorised",
      "data": [
        null,
        null,
        341,
        null,
        226,
        226,
        null,
        226,
        425,
        2240,
        1281,
        3727,
        1334
      ],
      "color": "#F98157",
      "events": {},
      "point": {
        "events": false
      },
      "customEvents": {
        "series": {},
        "point": {}
      }
    },
    {
      "name": "Off Task",
      "data": [
        null,
        null,
        -18937,
        null,
        -7056,
        -7034,
        null,
        -7163,
        -1271,
        -7208,
        -7091,
        -21658,
        -7050
      ],
      "color": "#E3454D",
      "events": {},
      "point": {
        "events": false
      },
      "customEvents": {
        "series": {},
        "point": {}
      }
    }
  ]
}
);

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/data.js"></script>
<script src="https://code.highcharts.com/modules/drilldown.js"></script>

<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>

Fiddle 演示