我想弄清楚如何自定义单个Sankey Chart起始块的大小?

例如,我希望沿路径的煤垂直起始线比天然气垂直起始线小一个百分比。我曾尝试查看Google Development Documents,但仅看到有关如何扩展,散布和更改Sankey图颜色的参考。

javascript - 如何调整Sankey Chart起始块的大小?-LMLPHP

这是我当前通过JSFiddle编写的代码:

  google.setOnLoadCallback(drawChart);

  function drawChart() {
    var data = new google.visualization.DataTable();
    data.addColumn('string', 'From');
    data.addColumn('string', 'To');
    data.addColumn('number', 'Weight');
    data.addRows([
      [ 'Nuclear Electric Power', 'Electricity Retail Sales', 100 ],
      [ 'Renewable Energy', 'Electricity System Energy Losses', 29 ],
      [ 'Coal', 'Electricity System Energy Losses', 96 ],
      [ 'Natural Gas', 'Electricity System Energy Losses', 44 ],
      [ 'Petroleum', 'Transportation', 87 ],
      [ 'Electricity System Energy Losses', 'Commercial', 69 ],
      [ 'Electricity System Energy Losses', 'Residential', 69 ],
      [ 'Electricity System Energy Losses', 'Industrial', 28 ],
      [ 'Renewable Energy', 'Commercial', 1 ],
      [ 'Renewable Energy', 'Residential', 8 ],
      [ 'Renewable Energy', 'Industrial', 61 ],
      [ 'Coal', 'Industrial', 4 ],
      [ 'Natural Gas', 'Commercial', 12],
      [ 'Natural Gas', 'Residential', 13],
      [ 'Natural Gas', 'Industrial', 30],
      [ 'Natural Gas', 'Transportation', 1],
      [ 'Petroleum', 'Commercial', 2 ],
      [ 'Petroleum', 'Residential', 2 ],
      [ 'Petroleum', 'Industrial', 9 ]
      //MAKE SURE TO NOT PUT A COMMA ON THE LAST BLOCK
    ]);

    // Sets chart options.
   var options = {
     width: 600,
    };


//var options = {
  //height: 400,
  //sankey: {
    //node: {
      //colors: colors
    //},
    //link: {
      //colorMode: 'gradient',
      //colors: colors
    //}
  //}
//};

    // Instantiates and draws our chart, passing in some options.
    var chart = new google.visualization.Sankey(document.getElementById('sankey_basic'));
    chart.draw(data, options);
  }

最佳答案

煤的垂直线(矩形称为节点)的大小根据数据中的值/权重确定。如果您查看的是煤炭,则其总价值或为100([[Coal],“ Electricity System Energy Loss”,96] + ['Coal”,“ Industrial”,4])。将值从96减小到50(示例),节点高度会更改。希望这可以帮助。

09-18 04:19