Question

我正在尝试修改绘图以插入自定义图例。代码如下

<head>
  <base href="https://polygit.org/polymer+1.6.0/components/">
  <script src="webcomponentsjs/webcomponents-lite.min.js"></script>
  <link rel="import" href="polymer/polymer.html">
</head>
<body>
  <x-app></x-app>

  <dom-module id="x-app">
    <template>
      <x-foo items="{{items}}"></x-foo>
      <x-bar items="[[items]]"></x-bar>
    </template>
  </dom-module>
  <dom-module id="x-foo">
    <template>
      <h2><code>x-foo</code></h2>
      <button on-tap="_addItem">Add item</button>
    </template>
  </dom-module>
  <dom-module id="x-bar">
    <template>
      <h2><code>x-bar</code></h2>
      <ul>
        <template is="dom-repeat" items="[[items]]">
          <li>[[item.name]]</li>
        </template>
      </ul>
    </template>
  </dom-module>
</body>

}）;

html是：

$(document).ready(function(){
    graph = $('.Graph').plot(formatFlotData(), {
    colors: [ '#20f', '#00ff4b', '#f00', '#fdff00'],
    xaxis: {
        show: false,
        min : 0,
        max : res
    },
    yaxis: {
        min : -50,
        max : 50,
        font : {
                    size: 11,
                    lineHeight: 13,
                    style: "italic",
                    weight: "bold",
                    family: "sans-serif",
                    variant: "small-caps",
                    color: "#f2f2f2"
                },
        color : "#f2f2f2"
    },
    grid: {
        borderColor : "#333",
        borderWidth : 3
    }
}).data("plot");

问题是无论我在哪里尝试插入“图例：”声明，它似乎都不起作用。我已尝试在网格声明下方，并在绘图函数“）”之前的“}”之后使用逗号。

<div class='Graph' style="display : inline-block"></div>
<div id="legend-container"></div>

答案是：

{legend: { show: true, container: '#legend-container' }}

Answer 1

container选项必须是jQuery object/DOM element/jQuery expression：

legend: {
    show: true,
    container: $('#legend-container')
}

这个JSFiddle有一个有效的例子。

使用flot jquery api的情节中的传奇

1 个答案: