时间戳

首页 > 解决方案 > 几个图在flot中具有相同的图例

javascript - 几个图在flot中具有相同的图例

问题描述

我正在使用 JQuery Flot 图形插件在页面中绘制一些条形图。当我按以下数据和选项绘制图表时：

 
        var chartData = [{
              label: 'success',
              data: [[0,1],[1,1]],
              bars: {
                  order: 0,
                  fillColor: '#fff'
              },
              color: '#fff'
            }, {
              label: 'fail',
              data: [[0,3],[2,1]],
              bars: {
                order: 1,
                fillColor: 'rgba(255,255,255,0.5)'
              },
              color: 'rgba(255,255,255,0.5)'
            }];

 
        var barChartOptions = {
        ...
        legend:{
            container: '.flot-chart-legends--bar',
            backgroundOpacity: 0.5,
            noColumns: 0,
            lineWidth: 0,
            labelBoxBorderColor: 'rgba(255,255,255,0)'
        }
    };
  $.plot($('.flot-bar'), chartData, barChartOptions);

它适用于我的条形图，但是，没有标签的其他图表附有相同的标签。我该怎么做呢？请帮忙！

标签： javascriptjquerylegendflot

解决方案

我解决了！查看源代码flot.js，发现不正确的代码如下：

$(options.legend.container).html(table);

这使得所有选择器都container包含相同的 html。我这样纠正它：

placeholder.parent().find(options.legend.container).html(table);

并且 html 仅附加到我想要的正确图表上。

推荐阅读