如何为浮点图正确显示大型数据集图例？答案

【问题标题】：How to show large dataset legends properly for flot chart?如何为浮点图正确显示大型数据集图例？
【发布时间】：2015-02-03 20:21:05
【问题描述】：

在我的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

【问题讨论】：

标签： javascript angularjs flot

【解决方案1】：

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

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

这个问题有时你可能会发现颜色框是最后一个，而它的标签在下一行。

Plunkr Demo

【讨论】：

感谢这种解决了我的问题。我的数据格式也适合条形堆叠，因为我在图表中看到不规则的悬停变化！
我觉得不错。你说的悬停问题是什么？
修改了我的plunker link 以包括显示第一个 xaxis 数据分别有 2 个点 1 和 2 的工具提示 .. 看起来 2 与 1 重叠，理想情况下它应该显示条形高度应该是直到 3 (1 +2)
不确定我是否得到你。要使堆栈工作，您还需要包含堆栈 js。 Check now
我猜你需要拥有所有日期的条目才能消除重叠。如果它不存在，您可以将其设为 0 个任务，但应该有一个条目。 Check this fiddle 并按照 CSS 窗口中的说明进行操作。

【解决方案2】：

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

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

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

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

updated plunkr

【讨论】：

但它会一直保持不变，当我调整浏览器大小时它不会改变。
在重新绘制图表之前，您可以在调整大小事件代码中计算与新宽度相关的列数。
谢谢，能不能先给个小sn-p？