为了账号安全,请及时绑定邮箱和手机立即绑定

无法更新高图表的数据

无法更新高图表的数据

开满天机 2022-09-23 09:22:18

我想在按钮点击时更新图表上的数据。我已尝试使用 和 。两者都没有用最新信息更新我的图表。addSeriesredraw


这是怎么回事?


let stacks1 = [{

            linkedTo: 'yo',

                name:'yo',

            data: [106.4, 129.2, 144.0, 29.9, 71.5],

            stack: 1,

        }, {

            linkedTo:'yo0',

                name:'yo0',

            data: [148.5, 216.4, 30, 176.0, 135.6],

            stack: 1,

        }]

let stacks2 = [{        

                id: 'yo',

                name:'yo',

            data: [29.9, 71.5, 106.4, 129.2, 144.0],

            stack: 2

        }, {

                id:'yo0',

                name:'yo0',

            data: [30, 176.0, 135.6, 148.5, 216.4],

            stack: 2

        }]


Highcharts.chart('container', {

    chart: {

        type: 'column'

    },


    xAxis: {

        categories: ['One', 'Two', 'Three', 'Four', 'Five']

    },


    plotOptions: {

        column: {

            stacking: 'normal'

        }

    },


    series: stacks2

});


$('#btn').on('click', function(){

$('#container').highcharts().addSeries(stacks1);

$('#container').highcharts().redraw();

});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<script src="https://code.highcharts.com/highcharts.js"></script>


<div id="container" style="height: 400px"></div>

<button type="button" id='btn'>Click Me!</button>

如您所见,它正在添加一个随机图例。也没有添加我的最新数据。Series 3

它不应该添加 .由于我已添加到我正在添加的新堆栈中。所有堆叠图表应由 2 个图例控制。Series 3linkedTo

单击时,我只想向现有图表添加一组新数据。

为什么没有发生这种情况?

我需要一个具有2个堆栈的堆叠柱形图,第二个堆栈应在单击时形成


查看完整描述

2 回答

?
胡说叔叔

TA贡献1494条经验 获得超8个赞

您需要使用方法两次:addSeries

$('#btn').on('click', function() {
    chart.addSeries(stacks1[0], false);
    chart.addSeries(stacks1[1], false);

    chart.redraw();
});

现场演示:http://jsfiddle.net/BlackLabel/4aqn02s8/

API 参考:https://api.highcharts.com/class-reference/Highcharts.Chart#addSeries


查看完整回答
反对 回复 2022-09-23
?
当年话下

TA贡献1552条经验 获得超9个赞

addSeries 期望单个系列的配置选项作为第一个参数 - https://api.highcharts.com/class-reference/Highcharts.Chart#addSeries。


您正在尝试添加堆栈1,其中包含两组选项。如果分别添加两个系列,则有效。您还可以通过将第二个参数设置为 true 来使用 addSeries 命令重绘图表。请参阅下面的代码/代码段。


let stacks11 = {

            linkedTo: 'yo',

                name:'yo',

            data: [106.4, 129.2, 144.0, 29.9, 71.5],

            stack: 1,

        }

let stacks12 = {

            linkedTo:'yo0',

                name:'yo0',

            data: [148.5, 216.4, 30, 176.0, 135.6],

            stack: 1,

        }


let stacks2 = [{        

                id: 'yo',

                name:'yo',

            data: [29.9, 71.5, 106.4, 129.2, 144.0],

            stack: 2

        }, {

                id:'yo0',

                name:'yo0',

            data: [30, 176.0, 135.6, 148.5, 216.4],

            stack: 2

        }]


Highcharts.chart('container', {

    chart: {

        type: 'column'

    },


    xAxis: {

        categories: ['One', 'Two', 'Three', 'Four', 'Five']

    },


    plotOptions: {

        column: {

            stacking: 'normal'

        }

    },


    series: stacks2

});


$('#btn').on('click', function(){

$('#container').highcharts().addSeries(stacks11);

$('#container').highcharts().addSeries(stacks12,true);

//$('#container').highcharts().redraw();

});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<script src="https://code.highcharts.com/highcharts.js"></script>


<div id="container" style="height: 400px"></div>

<button type="button" id='btn'>Click Me!</button>


查看完整回答
反对 回复 2022-09-23
  • 2 回答
  • 0 关注
  • 10 浏览
慕课专栏
更多

添加回答

举报

0/150
提交
取消
意见反馈 帮助中心 APP下载
官方微信