Question

在我的flot图表中，当数据太大时，图例在图表视图中不合适，所以我决定让图例出现在外部容器中，但看起来像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

Answer 2

您的绘图选项中已有一行可以解决此问题：

            noColumns: 0, // number of colums in legend table

将此更改为合理的数字，您会得到一个更好的传奇：

            noColumns: 5, // number of colums in legend table

updated plunkr

如何正确显示flot图表的大型数据集图例？

2 个答案: