2

我想知道如何才能实现这样的目标：当我从选择组合框中更改选择时，饼图中的数据分布会相应改变。 在此处输入图像描述

HTML 代码片段：

<oj-option value="flow1">Flow1</oj-option>
<oj-option value="flow2">Flow2</oj-option>
<oj-option value="flow3">Flow3</oj-option>

JS代码片段：

var barSeries = [{name: "field1", items: [90, 34]},
   {name: "field2", items: [55, 30]},
   {name: "field3", items: [36, 50]},
   {name: "field4", items: [22, 46]},
   {name: "field5", items: [60, 46]}];
self.barSeriesValue = ko.observableArray(barSeries);

简而言之，问题应该是：如何从 HTML 中获取oj-option 的值，并将其作为 JS 中的条件来更改变量barSeries？

4

2 回答 2

3

像这样：

  1. 在 observable 中获取 oj-select-one 的值，比如“currentFlow”。

  2. 提供一个on-value-changed属性。它的值将是一个函数的名称，当值更改时，您将使用该函数来更新图表，例如“updateChart”：

    <oj-select-one id="basicSelect" value="{{currentFlow}}" on-value-changed="
[[updateChart]]" >
    <oj-option value="flow1">Flow1</oj-option>
    <oj-option value="flow2">Flow2</oj-option>
    <oj-option value="flow3">Flow3</oj-option>
</oj-select-one>

  3. 在“updateChart”函数中，获取currentFlowobservable 的当前值，并相应地更改 observableArray 的值barSeriesValue。

    self.updateChart = function(){
    if (self.currentFlow() == 'flow1'){
        self.barSeriesValue.push({name:'field6',items:[70,22]});
    }
    if (self.currentFlow() == 'flow2'){
        self.barSeriesValue.pop();
    }
    if (self.currentFlow() == 'flow3'){
        self.barSeriesValue.push({name:'field6',items:[30,52]});
    }
}
于 2017-10-10T17:18:19.580 回答
2

这个应该很简单。在 on-value-change 事件处理程序中，获取选择组件的值并使用它来重置 barSeries 数组的值。

barSeries 数组用作提供图表的 observable 的基础。更改数组后，图表将自动更新以反映新数据。

由于您使用的是新的 JET 4.0.0 自定义元素语法，因此 on-value-change 事件现在看起来像这样（这是以前版本的 JET 中的 optionChange 事件选项）：

<oj-select-one id="select" on-value-changed="[[valueChangedHandler]]" 
        style="max-width:20em">
        <oj-option value="Internet Explorer">Internet Explorer</oj-option>
            <oj-option value="Firefox">Firefox</oj-option>
            <oj-option value="Chrome">Chrome</oj-option>
            <oj-option value="Opera">Opera</oj-option>
            <oj-option value="Safari">Safari</oj-option>
      </oj-select-one>

请注意传递给事件处理程序方法的“on-value-change”属性。

于 2017-10-10T16:16:49.470 回答