Javascript 当数据更改时，饼图中的切片大小保持不变（版本=截至本文的当前版本）

我有一个饼图，它是使用GoogleJSON图表模式加载的。JSON数据是使用ajax创建的。除了饼图的一个问题外，所有谷歌图表都按设计工作

示例饼图数据。 假设首次加载饼图时，有四个数据元素的值构成饼图中的四个切片：

A = 410
B = 420
C = 900
D = 540

410 + 420 + 900 + 540 = 2270

410/2270 = 0.1806167400881057 =  65.02°
420/2270 = 0.1850220264317181 =  66.61°
900/2270 = 0.3964757709251101 =  142.73°
540/2270 = 0.2378854625550661 =  85.64°

第一次加载饼图时，切片百分比和带有数量的标签看起来很好

问题在于饼图数据何时更改。所有饼图切片都不会改变大小。切片数据标签会更改，但切片度数不会：

更新数据示例 如果数据从：410+420+900+540=2270更改为：410+420+9+540=1379

因此，如果C的值从900变为9，则即使存在相当大的百分比差异，变化程度也不会反映在切片C和切片A、B和D中。然而，我已经包含了这个场景的一个图像，其中包含了不同的数据

饼图切片大小的唯一变化是单击切片向下搜索时，但在那里它是相同格式的json文件，只是不同的值。我比较了加载时和数据更改后的json数据，没有发现饼图切片大小不应该更改的原因。我能推断出的唯一一件事是，我对json或绘制图表做了一些错误，或者SVG被缓存，或者饼图没有更新切片大小

json数据

---

根饼图切片问题未解决。这可能不完全是谷歌饼图的错误，但在处理完数据后，我只能得出结论，饼图需要以某种方式刷新。我将在每次数据更新时查看清除饼图中百分比的选项。也许如果我调用我的数据加载2x，第一次调用时将百分比设置为0，第二次调用时加载数据。丑陋，但可能会让我摆脱这个问题。谢谢你的帮助

我注意到，当 饼图数据更改

只有在调试断点更改变量值时，绿色切片的饼图切片百分比才会更改。我认为问题在于，即使数据的总价值发生了变化，饼图百分比也没有更新

---

注意：图表容器位于bootstrap列中。图表JavaScript文本数据是从PHP返回的

很难说不能够重新创建-我注意到有4行，但只有3个切片，json->00805D中有一个重复的颜色-此外，role:style应该是列的一部分，而不是列属性p:{}，PieChart不支持它…谢谢。这张图片只是一个例子。但是在你的帮助下，我改变了我的json。看起来像这样，但切片颜色仍然没有改变。{cols:[{label:Title，type:string}，{label:Dollars，type:number}，{type:string，role:style}]，rows:[{c:[{v:CTY，f:country}，{v:945，f:$945}，{v:fill color:00000cf，f:null}]}}我的主要问题是片不会改变，但让角色样式正常工作会很好。饼图支持的唯一角色是工具提示…我认为这可以结束。每个切片的阶数与饼图的总阶数或n成正比。我展示了n的百分比，然后试图用错误的图表来可视化百分比的变化，尽管如此，当n减少或增加x时。当n上升或下降时，百分比也会上升或下降。这就是为什么每次n发生变化时，我需要从头开始重新构建图表，以便百分比是新的。谢谢

410/1379 = 0.2973168963016679 = 107.03°
420/1379 = 0.3045685279187817 = 109.65°
  9/1379 = 0.0065264684554025 = 2.35°
540/1379 = 0.3915881073241479 = 140.97°

{ "cols":[{"id":"","label":"Title","pattern":"","type":"string"},{"id":"","label":"Dollars","pattern":"","type":"number"},{"id":"","label":"","pattern":"","type":"string","p":{"role":"style"}}],
  "rows":[{"c":[{"v":"A","f":"label a"},{"v":410.0,"f":"$410.00"},{"v":"fill-color: #00805D","f":null}]},
          {"c":[{"v":"B","f":"label b"},{"v":420.0,"f":"$420.00"},{"v":"fill-color: #00805D","f":null}]},
          {"c":[{"v":"C","f":"label c"},{"v":900.00,"f":"$900.00"},{"v":"fill-color: #78EAD3","f":null}]},
          {"c":[{"v":"D","f":"label d"},{"v":540.00,"f":"$540.00"},{"v":"fill-color: #F88451","f":null}]}]}

<div id="chart_div"></div>

function drawPieChart(data) {

    $('#chart_div').empty();
    $('#chart_div').css('cursor','default')

    var options = chartOptions();

    var v_savings_suffix="";
    if(paoDetails.chart.mode.state === "sav") {
        v_savings_suffix = " (Savings)";
    }

    var _options = {
        title: v_chart_title + ' ' + v_savings_suffix
    }
    Object.assign( options, _options );

    var wrapper = new google.visualization.ChartWrapper({
        chartType: 'PieChart',
        dataTable: data,
        options: options,
        containerId: 'chart_div'
    });

    // Must wait for the ready event in order to
    // request the chart and subscribe to 'onmouseover'.
    google.visualization.events.addListener(wrapper, 'ready', onReady);

    function onReady() {
        google.visualization.events.addOneTimeListener(wrapper.getChart(), 'select', selectHandler);
        }
        wrapper.draw();

    function selectHandler() {

        var options=null;
        var selectedSlice = wrapper.getChart().getSelection()[0];
        if (selectedSlice) {    

            // get fund code from selected slice
            var fundCode = wrapper.getDataTable().getValue(selectedSlice.row, 0);
                if(fundCode !== "NAV") {
                options = wrapper.getOptions();
                if(options.slices) {
                    paoDetails.chart.mode.breakdown.fundKey = fundCode;                     
                    var slice = options.slices;
                    var keys = Object.keys(slice).map(Number);
                    if(keys) {      
                        paoDetails.chart.mode.breakdown.show = !paoDetails.chart.mode.breakdown.show;
                        paoDetails.chart.mode.funds = !paoDetails.chart.mode.funds;
                        recalcExemp();
                    }
                    wrapper.setOptions(options);
                    wrapper.draw();          
                }
            }
        }
    }
} // end drawPieChart