【问题标题】:nvd3 multibar - update existing chart with different legend states (as if they were clicked)nvd3 multibar - 使用不同的图例状态更新现有图表(就像单击它们一样)
【发布时间】:2015-10-06 01:28:39
【问题描述】:

我需要有关如何访问和“更新” nvd3 multiBarChart(以及其他类似stackAreaChart、multiChart)中的状态的帮助。我正在使用 nvd3 1.7.x 并且有一个正在运行的 multiBarChart,其中包含来自 JSON 文件的一些源(状态)。此外,我有多个 JSON 文件,用于具有相同来源(状态)的不同时间集。

我搜索了很多关于这个问题的答案和提示,发现在一个旧问题(旧 nvd3 版本)nvd3 passing wrong event on stateChange (when clicking legend) after chart is reloadedHow to disable some streams by default in a nvd3 Simple Line Chart? 关于 nvd3 1.1 或更早版本中只有 2 个命中,他们讨论了一个解决方法,因为存在错误. 当我们在 2015 年更新到 1.7 并且状态函数(getter、setter 等)发生了一些变化时,我想知道这个错误是否仍然存在以及如何以正确的方式使用新函数。注释和新文档并没有帮助我(仅适用于已弃用的 defaultState 它告诉:使用 dispatch.stateChange(state); 代替)。


好的,我该怎么做/需要什么?: 我想将用户所做的状态更改/选择保存为“配置”变量,然后我想将这些状态恢复到相同的图表对象,该图表对象已使用具有相同状态的不同数据(另一个 json 文件)进行了更新。我的问题是,json 文件存储了默认状态设置,如果用户循环浏览数据集,我需要覆盖这些设置 - 否则他需要在每次更改时再次选择流配置。

示例:假设我们运行的图表包含可用的堆叠和分组以及一些流:stream1、stream2、stream3。默认情况下,图表加载堆叠视图,所有 3 个流在 json 文件中可见,例如“2015”。

chart.stacked(): {true}
chart.state.disabled: {"disabled":[false,false,false]}

因此,如果用户只想比较不同时间序列中的流 1 和 3,他会停用/点击流 2:

chart.stacked(): {true}
chart.state.disabled: {"disabled":[false,true,false]}

然后这个设置被存储(这个工作正常!)并且需要为下一个数据集(不同的 json 文件,例如“2014”)恢复(这个现在不工作)。


我有一个工作图表,它正在加载和显示不同的 json 文件。选择由下拉列表实现,事件由 jquery 触发。我可以通过获取以下值来保存状态:

chart.stacked();
chart.state.disabled;
chart.reduceXTicks();

当我覆盖保存的状态时,我可以在 chart.state.disabled 中看到新值,但在 chart.update(); 之后它们消失了,我从 json 文件/初始图表对象中看到了默认状态。

我已经尝试过不同的函数,例如调度函数(changeState、stateChange),但在图表更新后我没有成功保留这些值。

//oldStates is a copy of the last states before switching to a new time set (json file) in the chart.
chart.state.disabled = oldStates; 
// works but chart.update overwrites it with default values!

chart.defaultState(oldStates);
// NO changes. marked as DEPRECATED in documentation saying: Use chart.dispatch.changeState(...) instead.

chart.dispatch.changeState(oldStates); 
// No change, not working?

我很高兴获得任何提示/提示如何通过覆盖/更改单个状态来更改状态并使用它们更新图表,仅呈现新选择。谢了!

【问题讨论】:

    标签: javascript jquery json charts nvd3.js


    【解决方案1】:

    也许这会有所帮助: http://plnkr.co/edit/CoGZkNoe4COEtjHMWtk6?p=preview

        data = data.map(function(series){
          if (series.key === 'Disabled Series Key'){
            series.disabled = true;
          }
          return series;
        });
    

    您可以在将其传递给图表之前在系列数组中设置各个系列的禁用属性。

    【讨论】:

    • 嘿,谢谢 - 即使在您发帖这么久之后。首先我没有让它发挥作用,经过一段时间的努力研究其他主题后,我们终于在最后半年回到了这个问题,在那里我们发现了我们的错误并理解了你的解决方案(很晚但还不算太晚:-D)。所以感谢您的帮助,我们终于通过您的功能提示让它工作了。
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2015-03-07
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2014-09-17
    相关资源
    最近更新 更多