动画条形图不显示过渡，仅显示Plotly.js中的关键帧

时间：2019-04-23 05:17:11

标签： javascript plotly plotly.js

我一直在尝试使用addFrames函数使用Plotly.js对三个数据集的堆叠条形图进行动画处理。我想设置条的长度（x值）和条的宽度的动画。不幸的是，除非我在每个帧的末尾使用redraw: true强制重绘，否则屏幕上不会呈现任何内容。然后，它只渲染我设置的帧而没有过渡。

要创建脚本，我通常在Plotly网站上提到this example。

以下是代码段：

//Load in data
var supply = [
  [280, 720, 476.6666667, 876.4705882, 650, 736.6666667, 1831.333333, 1005.714286, 390, 462.3529412, 0, 611.4102564, 800, 526.5217391, 503.030303, 543.6111111, 1023.529412, 1360, 1980, 1651.612903, 1000, 1760, 886.6666667, 0, 0, 0, 2220],
  [280, 720, 476.6666667, 876.4705882, 650, 736.6666667, 1831.333333, 1025.357143, 390, 462.3529412, 0, 760, 800, 526.5217391, 503.030303, 543.6111111, 1200, 1360, 1800, 1920, 1000, 1760, 886.6666667, 0, 0, 0, 2220],
  [280, 720, 476.6666667, 876.4705882, 650, 736.6666667, 1831.333333, 1056.785714, 390, 462.3529412, 0, 760, 800, 538.6956522, 527.2727273, 435.4166667, 1200, 1360, 1800, 1920, 1000, 2053.333333, 886.6666667, 0, 0, 0, 2220],
  [280, 900, 476.6666667, 900, 879.5454545, 487.5, 1831.333333, 1056.785714, 390, 462.3529412, 0, 760, 800, 523.4782609, 527.2727273, 527.7777778, 1200, 900, 1800, 1800, 1000, 2170.666667, 886.6666667, 0, 0, 1350, 1350],
  [280, 900, 476.6666667, 900, 1350, 487.5, 1831.333333, 937.5, 390, 575, 390, 785.4166667, 0, 504.1666667, 750, 595.5882353, 900, 900, 1800, 1800, 1000, 2170.666667, 886.6666667, 0, 0, 1350, 1350],
  [420, 900, 476.6666667, 900, 1350, 487.5, 1831.333333, 937.5, 390, 575, 390, 900, 0, 504.1666667, 750, 595.5882353, 900, 900, 1800, 1800, 900, 900, 837.5, 525, 1350, 1350, 1350],
  [548.5714286, 900, 476.6666667, 900, 1350, 487.5, 1831.333333, 937.5, 390, 641.6666667, 390, 900, 0, 496.1538462, 750, 767.6470588, 900, 900, 1800, 1800, 900, 900, 900, 900, 1350, 1350, 1350],
  [720, 900, 476.6666667, 900, 1350, 900, 1640, 900, 390, 725, 390, 900, 0, 487.5, 750, 767.6470588, 900, 900, 1800, 1800, 900, 1050, 900, 900, 1350, 1350, 1350],
  [720, 900, 880, 900, 1350, 900, 1640, 900, 390, 725, 390, 900, 0, 900, 750, 767.6470588, 900, 900, 1800, 1800, 900, 1050, 900, 900, 1350, 1350, 1350],
  [720, 900, 880, 900, 1350, 900, 1640, 900, 540, 825, 540, 900, 0, 900, 825, 833.8235294, 900, 900, 1800, 1800, 900, 1050, 900, 900, 1350, 1350, 1350],
  [720, 900, 880, 900, 1350, 900, 1640, 900, 540, 700, 540, 900, 0, 0, 900, 900, 900, 900, 1800, 1800, 900, 1050, 900, 900, 1350, 1350, 1350],
  [720, 900, 880, 900, 1350, 900, 1640, 900, 540, 700, 540, 900, 0, 0, 900, 900, 900, 900, 1800, 1800, 900, 1050, 900, 900, 1350, 1350, 1350],
  [720, 900, 880, 900, 1350, 900, 1640, 900, 540, 700, 540, 900, 0, 0, 900, 900, 900, 900, 1800, 1800, 900, 1050, 900, 900, 1350, 1350, 1350],
  [720, 900, 880, 900, 1350, 900, 1640, 900, 540, 700, 540, 900, 0, 0, 900, 900, 900, 900, 1800, 1800, 900, 1050, 900, 900, 1350, 1350, 1350]
];

var demand = [
  [221.3333333, 571.6666667, 391.3333333, 886, 108.6666667, 611, 1142.333333, 945.6666667, 221, 557.3333333, 0, 500.6666667, 568.3333333, 576.6666667, 550, 418.6666667, 820.6666667, 706, 1331.333333, 904, 979.6666667, 1176, 511, 0, 0, 0, 1384.666667],
  [299.7553333, 552.4706667, 419.5093333, 895.267, 159.3846667, 622.133, 1244.153333, 1086.046667, 222.2333, 530.5553333, 0, 571.1776667, 619.2893333, 580.1646667, 560.267, 447.7106667, 1059.226667, 810.73, 1333.155633, 1044.47, 1164.106667, 1347.2, 679.87, 0, 0, 0, 1240.306667],
  [378.1773333, 533.2746667, 447.6853333, 904.534, 210.1026667, 633.266, 1345.973333, 1226.426667, 223.4666, 503.7773333, 0, 641.6886667, 670.2453333, 583.6626667, 570.534, 476.7546667, 1297.786667, 915.46, 1334.977933, 1184.94, 1348.546667, 1518.4, 848.74, 0, 0, 0, 1095.946667],
  [456.6, 690.6, 480, 901.8, 552, 631.68, 1447.8, 1366.8, 218.82, 477, 0, 712.2, 712.2, 587.16, 580.8, 505.8, 1536.36, 691.8, 1410, 1233, 1533, 1689.6, 1017.6, 0, 0, 775.74, 814.8],
  [472.44, 708.12, 501.12, 915.72, 580.56, 702.492, 1413, 1420.32, 218.148, 546, 422.16, 882.96, 0, 588.888, 1007.58, 613.56, 1623.384, 701.868, 1420.32, 1262.508, 1475.4, 1567.8, 1052.28, 0, 0, 819.588, 1106.16],
  [805.44, 725.64, 522.24, 929.64, 609.12, 773.304, 1340.64, 1430.64, 217.476, 572.88, 418.92, 875.52, 0, 573.816, 1011.36, 639.72, 1717.968, 711.936, 1430.64, 1292.016, 1011.24, 1586.64, 786.408, 1086.96, 409.08, 863.436, 1397.52],
  [845.16, 743.16, 543.36, 943.56, 637.68, 844.116, 1337.76, 1440.96, 216.804, 599.76, 415.68, 868.08, 0, 558.744, 1015.14, 665.88, 1812.552, 722.004, 1440.96, 1321.524, 1016.76, 1488.96, 751.212, 1121.64, 613.62, 907.284, 1688.88],
  [884.88, 760.68, 564.48, 957.48, 666.24, 914.928, 1334.88, 1451.28, 216.132, 626.64, 412.44, 860.64, 0, 543.672, 1018.92, 692.04, 1907.136, 732.072, 1451.28, 1351.032, 1022.28, 1391.28, 716.016, 1156.32, 818.16, 951.132, 1980.24],
  [924.6, 778.2, 585.6, 971.4, 694.8, 985.74, 1332, 1461.6, 215.46, 653.52, 409.2, 853.2, 0, 528.6, 1022.7, 718.2, 2001.72, 742.14, 1461.6, 1380.54, 1027.8, 1293.6, 680.82, 1191, 1022.7, 994.98, 2271.6],
  [958.8, 766.44, 601.44, 977.64, 727.92, 999.432, 1387.656, 1502.928, 218.688, 691.992, 412.56, 861, 0, 528.6, 1018.5, 743.16, 2012.22, 749.712, 1498.56, 1438.08, 1069.8, 1304.64, 737.856, 1184.76, 1030.596, 1002.024, 2284.2],
  [993, 754.68, 617.28, 983.88, 761.04, 1013.124, 1443.312, 1544.256, 221.916, 730.464, 415.92, 868.8, 0, 0, 1014.3, 768.12, 2022.72, 757.284, 1535.52, 1495.62, 1111.8, 1315.68, 794.892, 1178.52, 1038.492, 1009.068, 2296.8],
  [1027.2, 742.92, 633.12, 990.12, 794.16, 1026.816, 1498.968, 1585.584, 225.144, 768.936, 419.28, 876.6, 0, 0, 1010.1, 793.08, 2033.22, 764.856, 1572.48, 1553.16, 1153.8, 1326.72, 851.928, 1172.28, 1046.388, 1016.112, 2309.4],
  [1061.4, 731.16, 648.96, 996.36, 827.28, 1040.508, 1554.624, 1626.912, 228.372, 807.408, 422.64, 884.4, 0, 0, 1005.9, 818.04, 2043.72, 772.428, 1609.44, 1610.7, 1195.8, 1337.76, 908.964, 1166.04, 1054.284, 1023.156, 2322],
  [1095.6, 719.4, 664.8, 1002.6, 860.4, 1054.2, 1610.28, 1668.24, 231.6, 845.88, 426, 892.2, 0, 0, 1001.7, 843, 2054.22, 780, 1646.4, 1668.24, 1237.8, 1348.8, 966, 1159.8, 1062.18, 1030.2, 2334.6]
];

var freq = [
  [4, 6, 7.333333333, 10, 10, 11.33333333, 13.66666667, 11, 6, 6, 0, 6.333333333, 6.666666667, 7, 6.666666667, 6.333333333, 10, 11.33333333, 11, 10.66666667, 8.333333333, 14.66666667, 12.66666667, 0, 0, 0, 12.33333333],
  [4, 6, 7.333333333, 10, 10, 11.33333333, 13.66666667, 11, 6, 6, 0, 6.333333333, 6.666666667, 7, 6.666666667, 6.333333333, 10, 11.33333333, 10, 10.66666667, 8.333333333, 14.66666667, 12.66666667, 0, 0, 0, 12.33333333],
  [4, 6, 7.333333333, 10, 10, 11.33333333, 13.66666667, 11, 6, 6, 0, 6.333333333, 6.666666667, 7, 6.666666667, 6.333333333, 10, 11.33333333, 10, 10.66666667, 8.333333333, 14.66666667, 12.66666667, 0, 0, 0, 12.33333333],
  [4, 7.5, 7.333333333, 7.5, 7.5, 7.5, 13.66666667, 11, 6, 6, 0, 6.333333333, 6.666666667, 7, 6.666666667, 6.333333333, 10, 7.5, 10, 10, 8.333333333, 14.66666667, 12.66666667, 0, 0, 7.5, 7.5],
  [4, 7.5, 7.333333333, 7.5, 7.5, 7.5, 13.66666667, 7.5, 6, 7.5, 6, 7.5, 0, 7.5, 7.5, 7.5, 7.5, 7.5, 10, 10, 8.333333333, 14.66666667, 12.66666667, 0, 0, 7.5, 7.5],
  [6, 7.5, 7.333333333, 7.5, 7.5, 7.5, 13.66666667, 7.5, 6, 7.5, 6, 7.5, 0, 7.5, 7.5, 7.5, 7.5, 7.5, 10, 10, 7.5, 7.5, 7.5, 7.5, 7.5, 7.5, 7.5],
  [6, 7.5, 7.333333333, 7.5, 7.5, 7.5, 13.66666667, 7.5, 6, 7.5, 6, 7.5, 0, 7.5, 7.5, 7.5, 7.5, 7.5, 10, 10, 7.5, 7.5, 7.5, 7.5, 7.5, 7.5, 7.5],
  [6, 7.5, 7.333333333, 7.5, 7.5, 7.5, 13.66666667, 7.5, 6, 7.5, 6, 7.5, 0, 7.5, 7.5, 7.5, 7.5, 7.5, 10, 10, 7.5, 7.5, 7.5, 7.5, 7.5, 7.5, 7.5],
  [6, 7.5, 7.333333333, 7.5, 7.5, 7.5, 13.66666667, 7.5, 6, 7.5, 6, 7.5, 0, 7.5, 7.5, 7.5, 7.5, 7.5, 10, 10, 7.5, 7.5, 7.5, 7.5, 7.5, 7.5, 7.5],
  [6, 7.5, 7.333333333, 7.5, 7.5, 7.5, 13.66666667, 7.5, 6, 7.5, 6, 7.5, 0, 7.5, 7.5, 7.5, 7.5, 7.5, 10, 10, 7.5, 7.5, 7.5, 7.5, 7.5, 7.5, 7.5],
  [6, 7.5, 7.333333333, 7.5, 7.5, 7.5, 13.66666667, 7.5, 6, 7.5, 6, 7.5, 0, 0, 7.5, 7.5, 7.5, 7.5, 10, 10, 7.5, 7.5, 7.5, 7.5, 7.5, 7.5, 7.5],
  [6, 7.5, 7.333333333, 7.5, 7.5, 7.5, 13.66666667, 7.5, 6, 7.5, 6, 7.5, 0, 0, 7.5, 7.5, 7.5, 7.5, 10, 10, 7.5, 7.5, 7.5, 7.5, 7.5, 7.5, 7.5],
  [6, 7.5, 7.333333333, 7.5, 7.5, 7.5, 13.66666667, 7.5, 6, 7.5, 6, 7.5, 0, 0, 7.5, 7.5, 7.5, 7.5, 10, 10, 7.5, 7.5, 7.5, 7.5, 7.5, 7.5, 7.5],
  [6, 7.5, 7.333333333, 7.5, 7.5, 7.5, 13.66666667, 7.5, 6, 7.5, 6, 7.5, 0, 0, 7.5, 7.5, 7.5, 7.5, 10, 10, 7.5, 7.5, 7.5, 7.5, 7.5, 7.5, 7.5]
];

//Prepare the stack values
var usedSupply = [];
var excessSupply = [];
var excessDemand = [];
for (let a = 0; a < supply.length; a++) {
  let usTemp = [];
  let esTemp = [];
  let edTemp = [];
  for (let b = 0; b < supply[a].length; b++) {
    if (supply[a][b] > demand[a][b]) usTemp.push(demand[a][b]);
    else usTemp.push(supply[a][b]);
    if (supply[a][b] - demand[a][b] > 0) esTemp.push(supply[a][b] - demand[a][b]);
    else esTemp.push(0);
    if (demand[a][b] - supply[a][b] > 0) edTemp.push(demand[a][b] - supply[a][b]);
    else edTemp.push(0);
  }
  usedSupply.push(usTemp);
  excessSupply.push(esTemp);
  excessDemand.push(edTemp);
}

//Prepare the y-axis tick locations
var tickSum = 0;
var tickVals = [];
for (let a = 0; a < freq.length; a++) {
  tickVals.push(15 * a + 7.5);
}

//Prepare the initial graph data
var trace0 = {
  name: 'Used Supply',
  type: 'bar',
  x: usedSupply[0],
  y: tickVals,
  width: freq[0],
  orientation: "h",
  marker: {
    color: '#cccccc',
    opacity: '1.0'
  }
}
var trace1 = {
  name: 'Excess Supply',
  type: 'bar',
  x: excessSupply[0],
  y: tickVals,
  width: freq[0],
  orientation: "h",
  marker: {
    color: '#00ff00',
    opacity: '0.5'
  }
}
var trace2 = {
  name: 'Excess Demand',
  type: 'bar',
  x: excessDemand[0],
  y: tickVals,
  width: freq[0],
  orientation: "h",
  marker: {
    color: '#ff0000',
    opacity: '0.5'
  }
}

var data = [trace0, trace1, trace2]

//Prepare the layout object
var layout = {
  barmode: 'stack',
  yaxis: {
    tickvals: tickVals
  }
}

//Generate key frames for animation
let frames = [];
let frameNames = [];
for (let a = 0; a < usedSupply.length; a++) {
  frames.push({
    name: 'frame' + a,
    x: excessSupply[a],
    width: freq[a]
  });
  frameNames.push('frame' + a);
}

//Load the plot and animate

Plotly.plot('plotly-div', data, layout, {
  showSendToCloud: true,
  responsive: true
}).then(function() {
  Plotly.addFrames('plotly-div', frames);
}).then(function() {
  Plotly.animate('plotly-div', frameNames, {
    transition: {
      duration: 1000,
      easing: 'linear'
    },
    frame: {
      duration: 500,
      redraw: false
    },
    mode: 'afterall'
  });
});
<script src="https://cdn.plot.ly/plotly-latest.min.js"></script>


<!-- Plotly chart will be drawn inside this div -->
<div id="plotly-div"></div>

我还尝试从框架中删除width属性，以查看是否引起问题。我还尝试添加y值（不变），但这也无济于事。

1 个答案:

答案 0 :(得分：0)

截至撰写本文时，尚无法使用Plot.ly为条形图制作动画。隐藏在documentation中的是这一行：

  

当前，只有散布迹线可以从一种状态平稳过渡到另一种状态。其他轨迹与帧和动画兼容，但是会立即更新。

这应该很快会改变。已经有commits个正在等待合并到母版中以允许条形图进行动画处理的地方。希望可以在不久的将来用可行的解决方案来更新此答案。如果您有信心构建自己的Plot.ly版本，则可以构建this分支版本以立即为条形图制作动画。

相关问题
最新问题