javascript - 如何为流程图正确显示大型数据集图例？

Question

在我的flot图表中，当数据太大时，图例在图 TableView 中无法正确显示，因此我决定让图例出现在外部容器中，但看起来flot在1行中创建了一个表td元素，而图例是没有包裹在div内部。另外，不知何故，我的堆叠似乎效果不佳，是否存在数据问题？

数据格式

[{
    "data": [
        [1415059200000, 2],
        [1415145600000, 2],
        [1415318400000, 1],
        [1415577600000, 1],
        [1415750400000, 1],
        [1415923200000, 3],
        [1416009600000, 1],
        [1416096000000, 1],
        [1416182400000, 1],
        [1416873600000, 2],
        [1416960000000, 2],
        [1418342400000, 2]
    ],
    "label": "Neeraj_secure",
    "bars": {
        "show": "true",
        "barWidth": 36000000,
        "fillColor": "#46CEAD",
        "order": 1,
        "align": "center"
    },
    "stack": true
}]

html 容器

<div id="adoptionLegendContainer"></div>
<flot dataset="tasksRunData" options="tasksRunChartOptions" class="center-block" width="100%" height="400px" min="reportTasksRunRange.min" max="reportTasksRunRange.max"></flot>

图表选项

xaxis: {
    mode: "time",
    timeformat: "%m/%d/%y",
    minTickSize: [1, "day"]
  },
  grid: {
    labelMargin: 10,
    hoverable: true,
    borderWidth: 0
  },
  series: {
    stack: true
  },
  colors: colorCodes,
  tooltip: true,
    legend: {
        show: true,
        noColumns: 0, // number of colums in legend table
        labelFormatter: null, // fn: string -> string
        labelBoxBorderColor: "#888", // border color for the little label boxes
        container: "#adoptionLegendContainer", // container (as jQuery object) to put legend in, null means default on top of graph
        position: "nw", // position of default legend container within plot
        margin: [5, 10], // distance from grid edge to default legend container within plot
        backgroundOpacity: 0 // set to 0 to avoid background
    }

请帮忙。我正在提供 plunker link here

Answer 1

您可以通过CSS将display: inline-block设置为容器#adoptionLegendContainer内的表格单元格。

#adoptionLegendContainer { height: 200px; overflow: auto;}
#adoptionLegendContainer td {display: inline-block;}
#adoptionLegendContainer td.legendColorBox{margin: 0 5px;}

这样做的问题是，有时您可能会发现颜色框是最后一个，而其标签位于下一行。

Plunkr Demo