在 JavaScript 中的 Telerik RadHTMLChart 中设置多行系列？

Question

我已经尝试设置 Telerik RadHTMLChart following this setup (including specifying XAxis/YAxis, Series, etc), and I've used this Telerik documentation （包括允许图表定义自己的参数，请参阅下面的标记）以尝试动态设置数据源，但我无法获得要显示的图表。

单击按钮时，它会删除一个 class 在 div 上执行 display: none; 包装图形，然后调用 generateGraph() 函数：

this.generateGraph = function () {
    var newData = [];

    for (var i = 0; i < 10; i++) {
        var newPoint = {
            "Value": 2 * i,
            "Color": "Green"
        }
        newData.push(newPoint);
    }

    radGraph.set_dataSource(newData);
    radGraph.repaint();
}

但是发生了一些奇怪的事情：

图表不会显示，除非使用 Chrome 控制台源，我在 radGraph.repaint() 上放置了一个断点并手动运行 radGraph.repaint() 命令。
这样做之后，没有显示任何数据点。
有几次我得到了一些值来显示（我什至不记得是如何显示的），多个点被一条线连接起来，就像在同一个系列中一样。

有人可以帮帮我吗？我使用的是 Telerik.Web.UI.dll 版本 2015.2.623.40.

这是标记：

<telerik:RadHtmlChart ID="radGraphChart" ClientIDMode="Static" runat="server">
    <PlotArea>
        <Series>
            <telerik:LineSeries DataFieldY="Value" ColorField="Color" >
            </telerik:LineSeries>
        </Series>
    </PlotArea>
</telerik:RadHtmlChart>

编辑： 我已经解决了#1 和#2 问题（#1 可能是 kendo 代码中的一个错误，它是 _loadData() 函数有 if(!u._isStockChart()){u._chartObject.refresh();}}else{u._chartObject.refresh();}，其中一个 refresh() 调用应该是 redraw()，我很确定......#2 是我在某处打错了字），但我仍然不知道不知道如何将多个系列添加到图表中。

Answer 1

我想通了大部分。

1 + 2:

我不知道具体在哪里，但是在 Kendo 函数中它没有在它应该做的地方做 redraw()/repaint()/refresh() ，因为我对 repaint() 的第一次调用是加载数据、设置属性等等，但是有 _dataSourceChanged = false 而不是实际重绘，所以第二个 repaint() 调用有 _dataSourceChanged = true 然后重绘。

3:

标记应该在 <Series> 标签中有 2 个 <telerik:LineSeries> 标签，并且只有一个不同的 DataFieldY 属性：

<telerik:RadHtmlChart ID="radGraphChart" ClientIDMode="Static" runat="server">
    <PlotArea>
        <Series>
            <telerik:LineSeries DataFieldY="Value1">
            </telerik:LineSeries>
            <telerik:LineSeries DataFieldY="Value2">
            </telerik:LineSeries>
        </Series>
    </PlotArea>
</telerik:RadHtmlChart>

然后您可以参考在 JavaScript 中添加一个数据点，方法是： this.generateGraph = 函数 () { var newData = [];

for (var i = 0; i < 10; i++) {
    var newPoint = {
        "Value1": 2 * i,
        "Value2": 3 * i
    }
    newData.push(newPoint);
}

radGraph.set_dataSource(newData);
radGraph.repaint();
radGraph.repaint();

在 JavaScript 中的 Telerik RadHTMLChart 中设置多行系列？

Set multiple line series in Telerik RadHTMLChart in JavaScript?

javascript

telerik

radhtmlchart

1 + 2:

3: