更改 Google Chart Sankey 图的链接颜色

如何解决更改 Google Chart Sankey 图的链接颜色

我有一个包含 [from,to,value,color] 条目的列表。我想在谷歌图表中用它创建一个桑基图。创建一个基本的桑基图并不困难，但是，我想根据列表中的 RGB 值更改链接颜色。我在 documentation 中读到我们可以为 style 添加一个可选的列角色。所以，我尝试以不同的方式添加：

data.addColumn({type: 'string',role: 'style'});

或者：

data.addColumn('string','style');

但它们都不起作用。我还尝试将 color 属性设置为 fill-color 但无济于事。最后，我还尝试编辑代码底部的 options 变量，因为这里还定义了节点和链接颜色。但我不确定如何在此处使用列表值。简单地将 colors 列表更改为 RGB 值列表不起作用，因为顺序不正确（错误的 RGB 值分配给链接）。如何确保使用列表第 4 个元素中的 RGB 值填充链接？代码的当前输出可以在下面找到。

<html>

  <body>
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>

    <div id="sankey_multiple" style="width: 100%; height: 500px;"></div>

    <script type="text/javascript">
      google.charts.load("current",{
        packages: ["sankey"]
      });
      google.charts.setOnLoadCallback(drawChart);

      function drawChart() {
        var data = new google.visualization.DataTable();
        data.addColumn('string','From');
        data.addColumn('string','To');
        data.addColumn('number','Weight');
        data.addColumn({
          type: 'string',role: 'style'
        });
        data.addRows([
          ['C0_1','C0_2',638,'color: rgb(255,207,207)'],['C0_1','C1_2',164,130,130)'],['C1_1',123,1313,['C0_2','C0_3',555,212,212)'],'C1_3',105,127,127)'],['C1_2',111,1320,['C0_3','C0_4',495,217,217)'],'C1_4',80,119,119)'],['C1_3',157,1223,['C0_4','C0_5',374,219,219)'],'C1_5',32,66,66)'],'C2_5',186,186)'],['C1_4',91,623,545,['C0_5','C0_6',299,225,225)'],'C1_6',27,63,63)'],'C2_6',59,170,170)'],['C1_5',13,425,197,['C2_5',136,135,409,['C0_6','C0_7',273,'C1_7',29,62,62)'],'C2_7',199,199)'],['C1_6',12,440,116,['C2_6',49,211,382,['C0_7','C0_8',239,208,208)'],'C1_8',9,40,40)'],'C2_8',31,192,192)'],['C1_7',39,403,210,['C2_7',77,106,344,['C0_8','C0_9',222,227,227)'],'C1_9',24,49)'],'C2_9',47,191,191)'],['C1_8',6,367,110,['C2_8',147,369,['C0_9','C2_10',188,188)'],'C1_10',26,26)'],'C0_10',204,204)'],['C1_9',156,332,['C2_9',340,90,67,['C2_10','C2_11',297,198,198)'],'C1_11',137,19,19)'],'C0_11',237,237)'],['C1_10',75,319,['C0_10',23,['C2_11','C2_12',247,'C1_12',95,0)'],'C0_12',43,226,226)'],['C1_11',182,267,['C0_11',60,180,['C2_12','C2_13',261,183,183)'],'C0_13',98,'C1_13',107,20,20)'],['C1_12',86,243,['C0_12',166,['C2_13','C1_14',69,33,33)'],'C0_14',245,245)'],'C2_14',142,142)'],['C0_13',185,38,['C1_13',201,3,134,['C1_14','C1_15',75)'],'C0_15',239)'],['C0_14',17,196,['C2_14',275,104,['C1_15','C0_16',241,241)'],'C1_16',464,68,68)'],['C0_15',254,['C0_16','C1_17',36,59)'],'C0_17',251,242,242)'],['C1_16',406,61,['C1_17','C1_18',370,64,64)'],'C0_18',48,['C0_17',['C1_18','C1_19',342,73,73)'],'C0_19',41,250,250)'],['C0_18',224,['C1_19','C0_20',255,255)'],'C1_20',323,84,84)'],['C0_19',202,['C0_20','C1_21',37,97,97)'],'C0_21',['C1_20',290,55,241)']
        ]);

        var colors = ['#a6cee3','#b2df8a','#fb9a99','#fdbf6f','#cab2d6','#ffff99','#1f78b4','#33a02c'
        ];

        // Set chart options
        var options = {
          height: 400,sankey: {
            node: {
              colors: colors,width: 5,nodePadding: 1
            },link: {
              colorMode: 'gradient',colors: colors
            }
          }
        };

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

    </script>
  </body>

</html>

当前输出：

解决方法

我在您的代码中注释了几行以获得以下结果。（我还将前三个数据行的颜色更改为红色、绿色和蓝色，以明确链接颜色正在从列表中读取。其他链接应按数据行的预期着色）：

我只是注释掉了覆盖行中定义的样式的部分图表选项：

// Set chart options
var options = {
  height: 400,sankey: {
    node: {
      colors: colors,width: 5,nodePadding: 1
    },link: {
      // Uncommenting any of these lines overrides the link colors defined in the data above.
      // colorMode: 'gradient',// colors: colors
    }
  }
};

完全修改的代码：

<div id="sankey_multiple" style="width: 100%; height: 500px;"></div>

<script type="text/javascript">
  google.charts.load("current",{
    packages: ["sankey"]
  });
  google.charts.setOnLoadCallback(drawChart);

  function drawChart() {
    var data = new google.visualization.DataTable();
    data.addColumn('string','From');
    data.addColumn('string','To');
    data.addColumn('number','Weight');
    data.addColumn({
      type: 'string',role: 'style'
    });
    data.addRows([
      ['C0_1','C0_2',638,'color: rgb(255,0)'],// Color changed to red.
      ['C0_1','C1_2',164,'color: rgb(0,255,// Color changed to green.
      ['C1_1',123,255)'],// Color changed to blue.
      ['C1_1',1313,130,130)'],['C0_2','C0_3',555,212,212)'],'C1_3',105,127,127)'],['C1_2',111,1320,['C0_3','C0_4',495,217,217)'],'C1_4',80,119,119)'],['C1_3',157,1223,['C0_4','C0_5',374,219,219)'],'C1_5',32,66,66)'],'C2_5',186,186)'],['C1_4',91,623,545,['C0_5','C0_6',299,225,225)'],'C1_6',27,63,63)'],'C2_6',59,170,170)'],['C1_5',13,425,197,['C2_5',136,135,409,['C0_6','C0_7',273,'C1_7',29,62,62)'],'C2_7',199,199)'],['C1_6',12,440,116,['C2_6',49,211,382,['C0_7','C0_8',239,208,208)'],'C1_8',9,40,40)'],'C2_8',31,192,192)'],['C1_7',39,403,210,['C2_7',77,106,344,['C0_8','C0_9',222,227,227)'],'C1_9',24,49)'],'C2_9',47,191,191)'],['C1_8',6,367,110,['C2_8',147,369,['C0_9','C2_10',188,188)'],'C1_10',26,26)'],'C0_10',204,204)'],['C1_9',156,332,['C2_9',340,90,67,['C2_10','C2_11',297,198,198)'],'C1_11',137,19,19)'],'C0_11',237,237)'],['C1_10',75,319,['C0_10',23,['C2_11','C2_12',247,'C1_12',95,'C0_12',43,226,226)'],['C1_11',182,267,['C0_11',60,180,['C2_12','C2_13',261,183,183)'],'C0_13',98,'C1_13',107,20,20)'],['C1_12',86,243,['C0_12',166,['C2_13','C1_14',69,33,33)'],'C0_14',245,245)'],'C2_14',142,142)'],['C0_13',185,38,['C1_13',201,3,134,['C1_14','C1_15',75)'],'C0_15',239)'],['C0_14',17,196,['C2_14',275,104,['C1_15','C0_16',241,241)'],'C1_16',464,68,68)'],['C0_15',254,['C0_16','C1_17',36,59)'],'C0_17',251,242,242)'],['C1_16',406,61,['C1_17','C1_18',370,64,64)'],'C0_18',48,['C0_17',['C1_18','C1_19',342,73,73)'],'C0_19',41,250,250)'],['C0_18',224,['C1_19','C0_20','C1_20',323,84,84)'],['C0_19',202,['C0_20','C1_21',37,97,97)'],'C0_21',['C1_20',290,55,241)']
    ]);

    var colors = ['#a6cee3','#b2df8a','#fb9a99','#fdbf6f','#cab2d6','#ffff99','#1f78b4','#33a02c'
    ];

    // Set chart options
    var options = {
      height: 400,sankey: {
        node: {
          colors: colors,nodePadding: 1
        },link: {
          // Uncommenting these lines overrides the link colors defined in the data above.
          // colorMode: 'gradient',// colors: colors
        }
      }
    };

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

</script>

更改 Google Chart Sankey 图的链接颜色

如何解决更改 Google Chart Sankey 图的链接颜色

解决方法

相关推荐