Question

我想要一张动态图表。我想添加新系列，甚至更改Forio Contour上出现的旧系列的值。我拿了一个Forio的例子并改了它：

$(function () {
    var myContour = new Contour({
            el: '.line-multi-basic',
            xAxis: {
                title: 'Group Size',
                type: 'linear'
            },
            yAxis: {
                title: 'Test Score'
            },
            legend: {
                vAlign: 'top',
                hAlign: 'left'
            }
        }).cartesian();

    var redLine = [{x: 0, y: 170},{x: 88, y: 170},{x: 178, y: 149},{x: 201, y: 106},{x: 287, y: 83},{x: 331, y: 105},{x: 353, y: 172},{x: 400, y: 219}];
    var greenLine = [{x: 0, y: 220},{x: 87, y: 130},{x: 154, y: 197},{x: 197, y: 195},{x: 220, y: 214},{x: 286, y: 215},{x: 332, y: 263},{x: 378, y: 241}, {x: 400, y: 242}];
    var blueLine = [{x: 0, y: 103},{x: 44, y: 103},{x: 154, y: 36},{x: 309, y: 150},{x: 376, y: 150},{x: 400, y: 171}];

    var data = [{name: 'Math', data: redLine}];
    myContour.line(data).tooltip().legend(data).render();

    data = [{name: 'Math', data: redLine},
            {name: 'Economics', data: greenLine}];
    myContour.line(data).tooltip().legend(data).render();
    
    data = [{name: 'Math', data: redLine},
            {name: 'Economics', data: greenLine},
            {name: 'History', data: blueLine}];
    myContour.line(data).tooltip().legend(data).render();
    
    //update redLine and reconstruct data
    var redLine = [{x: 0, y: 70},{x: 88, y: 70},{x: 178, y: 49},{x: 201, y: 6},{x: 287, y: 3},{x: 331, y: 5},{x: 353, y: 72},{x: 400, y: 19}];
    data = [{name: 'Math', data: redLine},
            {name: 'Economics', data: greenLine},
            {name: 'History', data: blueLine}];
    myContour.line(data).tooltip().legend(data).render();
    
});

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<link rel="stylesheet" href="http://forio.com/tools/contour/contour.min.css">
<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/lodash.js/2.4.1/lodash.js"></script>
<script src="http://forio.com/tools/contour/contour.min.js"></script>
<div class="chart line-multi-basic"></div>

图例不随数据更新而改变！此外，当我更新其中一个系列时，它只会绘制一个新系列！</ p>

Answer 1

这是您正在使用的轮廓版本中的一个错误，如果您将脚本（和css）包含在以下行中，则会修复该错误：

<link rel="stylesheet" href="https://forio.com/tools/contour/0.9.114/contour.min.css">
<script src="https://forio.com/tools/contour/0.9.114/contour.min.js"></script>

您应该可以致电chart.setData(...).render()并且图例应该正确更新。

如何在Forio Contour中更新数据和图例

1 个答案: