javascript - 更改 Google Chart Sankey 图的链接颜色-6ren

javascript - 更改 Google Chart Sankey 图的链接颜色

转载作者：行者123 更新时间：2023-12-04 11:35:04

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

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

或者:

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

但它们都不起作用。我也尝试设置 color归属于 fill-color但无济于事。最后我还尝试编辑 options代码底部的变量，因为这里还定义了节点和链接颜色。但我不确定如何在这里使用列表值。只需更改 colors list 到 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, 'color: rgb(255, 130, 130)'],
          ['C1_1', 'C0_2', 123, 'color: rgb(255, 207, 207)'],
          ['C1_1', 'C1_2', 1313, 'color: rgb(255, 130, 130)'],
          ['C0_2', 'C0_3', 555, 'color: rgb(255, 212, 212)'],
          ['C0_2', 'C1_3', 105, 'color: rgb(255, 127, 127)'],
          ['C1_2', 'C0_3', 111, 'color: rgb(255, 212, 212)'],
          ['C1_2', 'C1_3', 1320, 'color: rgb(255, 127, 127)'],
          ['C0_3', 'C0_4', 495, 'color: rgb(255, 217, 217)'],
          ['C0_3', 'C1_4', 80, 'color: rgb(255, 119, 119)'],
          ['C1_3', 'C0_4', 157, 'color: rgb(255, 217, 217)'],
          ['C1_3', 'C1_4', 1223, 'color: rgb(255, 119, 119)'],
          ['C0_4', 'C0_5', 374, 'color: rgb(255, 219, 219)'],
          ['C0_4', 'C1_5', 32, 'color: rgb(255, 66, 66)'],
          ['C0_4', 'C2_5', 157, 'color: rgb(255, 186, 186)'],
          ['C1_4', 'C0_5', 91, 'color: rgb(255, 219, 219)'],
          ['C1_4', 'C1_5', 623, 'color: rgb(255, 66, 66)'],
          ['C1_4', 'C2_5', 545, 'color: rgb(255, 186, 186)'],
          ['C0_5', 'C0_6', 299, 'color: rgb(255, 225, 225)'],
          ['C0_5', 'C1_6', 27, 'color: rgb(255, 63, 63)'],
          ['C0_5', 'C2_6', 59, 'color: rgb(255, 170, 170)'],
          ['C1_5', 'C0_6', 13, 'color: rgb(255, 225, 225)'],
          ['C1_5', 'C1_6', 425, 'color: rgb(255, 63, 63)'],
          ['C1_5', 'C2_6', 197, 'color: rgb(255, 170, 170)'],
          ['C2_5', 'C0_6', 136, 'color: rgb(255, 225, 225)'],
          ['C2_5', 'C1_6', 135, 'color: rgb(255, 63, 63)'],
          ['C2_5', 'C2_6', 409, 'color: rgb(255, 170, 170)'],
          ['C0_6', 'C0_7', 273, 'color: rgb(255, 219, 219)'],
          ['C0_6', 'C1_7', 29, 'color: rgb(255, 62, 62)'],
          ['C0_6', 'C2_7', 62, 'color: rgb(255, 199, 199)'],
          ['C1_6', 'C0_7', 12, 'color: rgb(255, 219, 219)'],
          ['C1_6', 'C1_7', 440, 'color: rgb(255, 62, 62)'],
          ['C1_6', 'C2_7', 116, 'color: rgb(255, 199, 199)'],
          ['C2_6', 'C0_7', 49, 'color: rgb(255, 219, 219)'],
          ['C2_6', 'C1_7', 211, 'color: rgb(255, 62, 62)'],
          ['C2_6', 'C2_7', 382, 'color: rgb(255, 199, 199)'],
          ['C0_7', 'C0_8', 239, 'color: rgb(255, 208, 208)'],
          ['C0_7', 'C1_8', 9, 'color: rgb(255, 40, 40)'],
          ['C0_7', 'C2_8', 31, 'color: rgb(255, 192, 192)'],
          ['C1_7', 'C0_8', 39, 'color: rgb(255, 208, 208)'],
          ['C1_7', 'C1_8', 403, 'color: rgb(255, 40, 40)'],
          ['C1_7', 'C2_8', 210, 'color: rgb(255, 192, 192)'],
          ['C2_7', 'C0_8', 77, 'color: rgb(255, 208, 208)'],
          ['C2_7', 'C1_8', 106, 'color: rgb(255, 40, 40)'],
          ['C2_7', 'C2_8', 344, 'color: rgb(255, 192, 192)'],
          ['C0_8', 'C0_9', 222, 'color: rgb(255, 227, 227)'],
          ['C0_8', 'C1_9', 24, 'color: rgb(255, 49, 49)'],
          ['C0_8', 'C2_9', 47, 'color: rgb(255, 191, 191)'],
          ['C1_8', 'C0_9', 6, 'color: rgb(255, 227, 227)'],
          ['C1_8', 'C1_9', 367, 'color: rgb(255, 49, 49)'],
          ['C1_8', 'C2_9', 110, 'color: rgb(255, 191, 191)'],
          ['C2_8', 'C0_9', 49, 'color: rgb(255, 227, 227)'],
          ['C2_8', 'C1_9', 147, 'color: rgb(255, 49, 49)'],
          ['C2_8', 'C2_9', 369, 'color: rgb(255, 191, 191)'],
          ['C0_9', 'C2_10', 24, 'color: rgb(255, 188, 188)'],
          ['C0_9', 'C1_10', 9, 'color: rgb(255, 26, 26)'],
          ['C0_9', 'C0_10', 192, 'color: rgb(255, 204, 204)'],
          ['C1_9', 'C2_10', 156, 'color: rgb(255, 188, 188)'],
          ['C1_9', 'C1_10', 332, 'color: rgb(255, 26, 26)'],
          ['C1_9', 'C0_10', 40, 'color: rgb(255, 204, 204)'],
          ['C2_9', 'C2_10', 340, 'color: rgb(255, 188, 188)'],
          ['C2_9', 'C1_10', 90, 'color: rgb(255, 26, 26)'],
          ['C2_9', 'C0_10', 67, 'color: rgb(255, 204, 204)'],
          ['C2_10', 'C2_11', 297, 'color: rgb(255, 198, 198)'],
          ['C2_10', 'C1_11', 137, 'color: rgb(255, 19, 19)'],
          ['C2_10', 'C0_11', 62, 'color: rgb(255, 237, 237)'],
          ['C1_10', 'C2_11', 75, 'color: rgb(255, 198, 198)'],
          ['C1_10', 'C1_11', 319, 'color: rgb(255, 19, 19)'],
          ['C1_10', 'C0_11', 13, 'color: rgb(255, 237, 237)'],
          ['C0_10', 'C2_11', 27, 'color: rgb(255, 198, 198)'],
          ['C0_10', 'C1_11', 23, 'color: rgb(255, 19, 19)'],
          ['C0_10', 'C0_11', 210, 'color: rgb(255, 237, 237)'],
          ['C2_11', 'C2_12', 247, 'color: rgb(255, 191, 191)'],
          ['C2_11', 'C1_12', 95, 'color: rgb(255, 0, 0)'],
          ['C2_11', 'C0_12', 43, 'color: rgb(255, 226, 226)'],
          ['C1_11', 'C2_12', 182, 'color: rgb(255, 191, 191)'],
          ['C1_11', 'C1_12', 267, 'color: rgb(255, 0, 0)'],
          ['C1_11', 'C0_12', 12, 'color: rgb(255, 226, 226)'],
          ['C0_11', 'C2_12', 60, 'color: rgb(255, 191, 191)'],
          ['C0_11', 'C1_12', 9, 'color: rgb(255, 0, 0)'],
          ['C0_11', 'C0_12', 180, 'color: rgb(255, 226, 226)'],
          ['C2_12', 'C2_13', 261, 'color: rgb(255, 183, 183)'],
          ['C2_12', 'C0_13', 98, 'color: rgb(255, 226, 226)'],
          ['C2_12', 'C1_13', 107, 'color: rgb(255, 20, 20)'],
          ['C1_12', 'C2_13', 86, 'color: rgb(255, 183, 183)'],
          ['C1_12', 'C0_13', 12, 'color: rgb(255, 226, 226)'],
          ['C1_12', 'C1_13', 243, 'color: rgb(255, 20, 20)'],
          ['C0_12', 'C2_13', 26, 'color: rgb(255, 183, 183)'],
          ['C0_12', 'C0_13', 166, 'color: rgb(255, 226, 226)'],
          ['C0_12', 'C1_13', 6, 'color: rgb(255, 20, 20)'],
          ['C2_13', 'C1_14', 69, 'color: rgb(255, 33, 33)'],
          ['C2_13', 'C0_14', 62, 'color: rgb(255, 245, 245)'],
          ['C2_13', 'C2_14', 219, 'color: rgb(255, 142, 142)'],
          ['C0_13', 'C1_14', 13, 'color: rgb(255, 33, 33)'],
          ['C0_13', 'C0_14', 185, 'color: rgb(255, 245, 245)'],
          ['C0_13', 'C2_14', 38, 'color: rgb(255, 142, 142)'],
          ['C1_13', 'C1_14', 201, 'color: rgb(255, 33, 33)'],
          ['C1_13', 'C0_14', 3, 'color: rgb(255, 245, 245)'],
          ['C1_13', 'C2_14', 134, 'color: rgb(255, 142, 142)'],
          ['C1_14', 'C1_15', 261, 'color: rgb(255, 75, 75)'],
          ['C1_14', 'C0_15', 12, 'color: rgb(255, 239, 239)'],
          ['C0_14', 'C1_15', 17, 'color: rgb(255, 75, 75)'],
          ['C0_14', 'C0_15', 196, 'color: rgb(255, 239, 239)'],
          ['C2_14', 'C1_15', 275, 'color: rgb(255, 75, 75)'],
          ['C2_14', 'C0_15', 104, 'color: rgb(255, 239, 239)'],
          ['C1_15', 'C0_16', 67, 'color: rgb(255, 241, 241)'],
          ['C1_15', 'C1_16', 464, 'color: rgb(255, 68, 68)'],
          ['C0_15', 'C0_16', 254, 'color: rgb(255, 241, 241)'],
          ['C0_15', 'C1_16', 26, 'color: rgb(255, 68, 68)'],
          ['C0_16', 'C1_17', 36, 'color: rgb(255, 59, 59)'],
          ['C0_16', 'C0_17', 251, 'color: rgb(255, 242, 242)'],
          ['C1_16', 'C1_17', 406, 'color: rgb(255, 59, 59)'],
          ['C1_16', 'C0_17', 61, 'color: rgb(255, 242, 242)'],
          ['C1_17', 'C1_18', 370, 'color: rgb(255, 64, 64)'],
          ['C1_17', 'C0_18', 48, 'color: rgb(255, 241, 241)'],
          ['C0_17', 'C1_18', 40, 'color: rgb(255, 64, 64)'],
          ['C0_17', 'C0_18', 245, 'color: rgb(255, 241, 241)'],
          ['C1_18', 'C1_19', 342, 'color: rgb(255, 73, 73)'],
          ['C1_18', 'C0_19', 41, 'color: rgb(255, 250, 250)'],
          ['C0_18', 'C1_19', 43, 'color: rgb(255, 73, 73)'],
          ['C0_18', 'C0_19', 224, 'color: rgb(255, 250, 250)'],
          ['C1_19', 'C0_20', 43, 'color: rgb(255, 255, 255)'],
          ['C1_19', 'C1_20', 323, 'color: rgb(255, 84, 84)'],
          ['C0_19', 'C0_20', 202, 'color: rgb(255, 255, 255)'],
          ['C0_19', 'C1_20', 41, 'color: rgb(255, 84, 84)'],
          ['C0_20', 'C1_21', 37, 'color: rgb(255, 97, 97)'],
          ['C0_20', 'C0_21', 188, 'color: rgb(255, 241, 241)'],
          ['C1_20', 'C1_21', 290, 'color: rgb(255, 97, 97)'],
          ['C1_20', 'C0_21', 55, 'color: rgb(255, 241, 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, 0)'], // Color changed to red.
      ['C0_1', 'C1_2', 164, 'color: rgb(0, 255, 0)'], // Color changed to green.
      ['C1_1', 'C0_2', 123, 'color: rgb(0, 0, 255)'], // Color changed to blue.
      ['C1_1', 'C1_2', 1313, 'color: rgb(255, 130, 130)'],
      ['C0_2', 'C0_3', 555, 'color: rgb(255, 212, 212)'],
      ['C0_2', 'C1_3', 105, 'color: rgb(255, 127, 127)'],
      ['C1_2', 'C0_3', 111, 'color: rgb(255, 212, 212)'],
      ['C1_2', 'C1_3', 1320, 'color: rgb(255, 127, 127)'],
      ['C0_3', 'C0_4', 495, 'color: rgb(255, 217, 217)'],
      ['C0_3', 'C1_4', 80, 'color: rgb(255, 119, 119)'],
      ['C1_3', 'C0_4', 157, 'color: rgb(255, 217, 217)'],
      ['C1_3', 'C1_4', 1223, 'color: rgb(255, 119, 119)'],
      ['C0_4', 'C0_5', 374, 'color: rgb(255, 219, 219)'],
      ['C0_4', 'C1_5', 32, 'color: rgb(255, 66, 66)'],
      ['C0_4', 'C2_5', 157, 'color: rgb(255, 186, 186)'],
      ['C1_4', 'C0_5', 91, 'color: rgb(255, 219, 219)'],
      ['C1_4', 'C1_5', 623, 'color: rgb(255, 66, 66)'],
      ['C1_4', 'C2_5', 545, 'color: rgb(255, 186, 186)'],
      ['C0_5', 'C0_6', 299, 'color: rgb(255, 225, 225)'],
      ['C0_5', 'C1_6', 27, 'color: rgb(255, 63, 63)'],
      ['C0_5', 'C2_6', 59, 'color: rgb(255, 170, 170)'],
      ['C1_5', 'C0_6', 13, 'color: rgb(255, 225, 225)'],
      ['C1_5', 'C1_6', 425, 'color: rgb(255, 63, 63)'],
      ['C1_5', 'C2_6', 197, 'color: rgb(255, 170, 170)'],
      ['C2_5', 'C0_6', 136, 'color: rgb(255, 225, 225)'],
      ['C2_5', 'C1_6', 135, 'color: rgb(255, 63, 63)'],
      ['C2_5', 'C2_6', 409, 'color: rgb(255, 170, 170)'],
      ['C0_6', 'C0_7', 273, 'color: rgb(255, 219, 219)'],
      ['C0_6', 'C1_7', 29, 'color: rgb(255, 62, 62)'],
      ['C0_6', 'C2_7', 62, 'color: rgb(255, 199, 199)'],
      ['C1_6', 'C0_7', 12, 'color: rgb(255, 219, 219)'],
      ['C1_6', 'C1_7', 440, 'color: rgb(255, 62, 62)'],
      ['C1_6', 'C2_7', 116, 'color: rgb(255, 199, 199)'],
      ['C2_6', 'C0_7', 49, 'color: rgb(255, 219, 219)'],
      ['C2_6', 'C1_7', 211, 'color: rgb(255, 62, 62)'],
      ['C2_6', 'C2_7', 382, 'color: rgb(255, 199, 199)'],
      ['C0_7', 'C0_8', 239, 'color: rgb(255, 208, 208)'],
      ['C0_7', 'C1_8', 9, 'color: rgb(255, 40, 40)'],
      ['C0_7', 'C2_8', 31, 'color: rgb(255, 192, 192)'],
      ['C1_7', 'C0_8', 39, 'color: rgb(255, 208, 208)'],
      ['C1_7', 'C1_8', 403, 'color: rgb(255, 40, 40)'],
      ['C1_7', 'C2_8', 210, 'color: rgb(255, 192, 192)'],
      ['C2_7', 'C0_8', 77, 'color: rgb(255, 208, 208)'],
      ['C2_7', 'C1_8', 106, 'color: rgb(255, 40, 40)'],
      ['C2_7', 'C2_8', 344, 'color: rgb(255, 192, 192)'],
      ['C0_8', 'C0_9', 222, 'color: rgb(255, 227, 227)'],
      ['C0_8', 'C1_9', 24, 'color: rgb(255, 49, 49)'],
      ['C0_8', 'C2_9', 47, 'color: rgb(255, 191, 191)'],
      ['C1_8', 'C0_9', 6, 'color: rgb(255, 227, 227)'],
      ['C1_8', 'C1_9', 367, 'color: rgb(255, 49, 49)'],
      ['C1_8', 'C2_9', 110, 'color: rgb(255, 191, 191)'],
      ['C2_8', 'C0_9', 49, 'color: rgb(255, 227, 227)'],
      ['C2_8', 'C1_9', 147, 'color: rgb(255, 49, 49)'],
      ['C2_8', 'C2_9', 369, 'color: rgb(255, 191, 191)'],
      ['C0_9', 'C2_10', 24, 'color: rgb(255, 188, 188)'],
      ['C0_9', 'C1_10', 9, 'color: rgb(255, 26, 26)'],
      ['C0_9', 'C0_10', 192, 'color: rgb(255, 204, 204)'],
      ['C1_9', 'C2_10', 156, 'color: rgb(255, 188, 188)'],
      ['C1_9', 'C1_10', 332, 'color: rgb(255, 26, 26)'],
      ['C1_9', 'C0_10', 40, 'color: rgb(255, 204, 204)'],
      ['C2_9', 'C2_10', 340, 'color: rgb(255, 188, 188)'],
      ['C2_9', 'C1_10', 90, 'color: rgb(255, 26, 26)'],
      ['C2_9', 'C0_10', 67, 'color: rgb(255, 204, 204)'],
      ['C2_10', 'C2_11', 297, 'color: rgb(255, 198, 198)'],
      ['C2_10', 'C1_11', 137, 'color: rgb(255, 19, 19)'],
      ['C2_10', 'C0_11', 62, 'color: rgb(255, 237, 237)'],
      ['C1_10', 'C2_11', 75, 'color: rgb(255, 198, 198)'],
      ['C1_10', 'C1_11', 319, 'color: rgb(255, 19, 19)'],
      ['C1_10', 'C0_11', 13, 'color: rgb(255, 237, 237)'],
      ['C0_10', 'C2_11', 27, 'color: rgb(255, 198, 198)'],
      ['C0_10', 'C1_11', 23, 'color: rgb(255, 19, 19)'],
      ['C0_10', 'C0_11', 210, 'color: rgb(255, 237, 237)'],
      ['C2_11', 'C2_12', 247, 'color: rgb(255, 191, 191)'],
      ['C2_11', 'C1_12', 95, 'color: rgb(255, 0, 0)'],
      ['C2_11', 'C0_12', 43, 'color: rgb(255, 226, 226)'],
      ['C1_11', 'C2_12', 182, 'color: rgb(255, 191, 191)'],
      ['C1_11', 'C1_12', 267, 'color: rgb(255, 0, 0)'],
      ['C1_11', 'C0_12', 12, 'color: rgb(255, 226, 226)'],
      ['C0_11', 'C2_12', 60, 'color: rgb(255, 191, 191)'],
      ['C0_11', 'C1_12', 9, 'color: rgb(255, 0, 0)'],
      ['C0_11', 'C0_12', 180, 'color: rgb(255, 226, 226)'],
      ['C2_12', 'C2_13', 261, 'color: rgb(255, 183, 183)'],
      ['C2_12', 'C0_13', 98, 'color: rgb(255, 226, 226)'],
      ['C2_12', 'C1_13', 107, 'color: rgb(255, 20, 20)'],
      ['C1_12', 'C2_13', 86, 'color: rgb(255, 183, 183)'],
      ['C1_12', 'C0_13', 12, 'color: rgb(255, 226, 226)'],
      ['C1_12', 'C1_13', 243, 'color: rgb(255, 20, 20)'],
      ['C0_12', 'C2_13', 26, 'color: rgb(255, 183, 183)'],
      ['C0_12', 'C0_13', 166, 'color: rgb(255, 226, 226)'],
      ['C0_12', 'C1_13', 6, 'color: rgb(255, 20, 20)'],
      ['C2_13', 'C1_14', 69, 'color: rgb(255, 33, 33)'],
      ['C2_13', 'C0_14', 62, 'color: rgb(255, 245, 245)'],
      ['C2_13', 'C2_14', 219, 'color: rgb(255, 142, 142)'],
      ['C0_13', 'C1_14', 13, 'color: rgb(255, 33, 33)'],
      ['C0_13', 'C0_14', 185, 'color: rgb(255, 245, 245)'],
      ['C0_13', 'C2_14', 38, 'color: rgb(255, 142, 142)'],
      ['C1_13', 'C1_14', 201, 'color: rgb(255, 33, 33)'],
      ['C1_13', 'C0_14', 3, 'color: rgb(255, 245, 245)'],
      ['C1_13', 'C2_14', 134, 'color: rgb(255, 142, 142)'],
      ['C1_14', 'C1_15', 261, 'color: rgb(255, 75, 75)'],
      ['C1_14', 'C0_15', 12, 'color: rgb(255, 239, 239)'],
      ['C0_14', 'C1_15', 17, 'color: rgb(255, 75, 75)'],
      ['C0_14', 'C0_15', 196, 'color: rgb(255, 239, 239)'],
      ['C2_14', 'C1_15', 275, 'color: rgb(255, 75, 75)'],
      ['C2_14', 'C0_15', 104, 'color: rgb(255, 239, 239)'],
      ['C1_15', 'C0_16', 67, 'color: rgb(255, 241, 241)'],
      ['C1_15', 'C1_16', 464, 'color: rgb(255, 68, 68)'],
      ['C0_15', 'C0_16', 254, 'color: rgb(255, 241, 241)'],
      ['C0_15', 'C1_16', 26, 'color: rgb(255, 68, 68)'],
      ['C0_16', 'C1_17', 36, 'color: rgb(255, 59, 59)'],
      ['C0_16', 'C0_17', 251, 'color: rgb(255, 242, 242)'],
      ['C1_16', 'C1_17', 406, 'color: rgb(255, 59, 59)'],
      ['C1_16', 'C0_17', 61, 'color: rgb(255, 242, 242)'],
      ['C1_17', 'C1_18', 370, 'color: rgb(255, 64, 64)'],
      ['C1_17', 'C0_18', 48, 'color: rgb(255, 241, 241)'],
      ['C0_17', 'C1_18', 40, 'color: rgb(255, 64, 64)'],
      ['C0_17', 'C0_18', 245, 'color: rgb(255, 241, 241)'],
      ['C1_18', 'C1_19', 342, 'color: rgb(255, 73, 73)'],
      ['C1_18', 'C0_19', 41, 'color: rgb(255, 250, 250)'],
      ['C0_18', 'C1_19', 43, 'color: rgb(255, 73, 73)'],
      ['C0_18', 'C0_19', 224, 'color: rgb(255, 250, 250)'],
      ['C1_19', 'C0_20', 43, 'color: rgb(255, 255, 255)'],
      ['C1_19', 'C1_20', 323, 'color: rgb(255, 84, 84)'],
      ['C0_19', 'C0_20', 202, 'color: rgb(255, 255, 255)'],
      ['C0_19', 'C1_20', 41, 'color: rgb(255, 84, 84)'],
      ['C0_20', 'C1_21', 37, 'color: rgb(255, 97, 97)'],
      ['C0_20', 'C0_21', 188, 'color: rgb(255, 241, 241)'],
      ['C1_20', 'C1_21', 290, 'color: rgb(255, 97, 97)'],
      ['C1_20', 'C0_21', 55, 'color: rgb(255, 241, 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: {
          // 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>

关于javascript - 更改 Google Chart Sankey 图的链接颜色，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/68224517/

文章推荐： reactjs - useMemo 内联组件与普通组件的行为不同

文章推荐： python - 在 3D 球体上插入非均匀分布的点

javascript - 执行存在于输入值字段中的 javascript - JavaScript
我有一个 html 格式的表单: 我需要得到 JavaScript在value input 字段执行，但只能通过表单的 submit .原因是页面是一个模板所以我不控制它(不能有
javascript - JavaScript 代码片段正在破坏其他 JavaScript
我管理的论坛是托管软件，因此我无法访问源代码，我只能向页面添加 JavaScript 来实现我需要完成的任务。我正在尝试用超链接替换所有页面上某些文本关键字的第一个实例。我还根据国家/地区代码对这些
javascript - JavaScript 如何使新页面包含更多 JavaScript？
我正在使用 JS 打开新页面并将 HTML 代码写入其中，但是当我尝试使用 document.write() 在新页面中编写 JS 时功能不起作用。显然，一旦看到，主 JS 就会关闭。用于即将打开的
javascript - Javascript 引擎如何在浏览器中执行 Javascript？
提问不是为了解决问题，提问是为了更好地理解系统专家!我知道每当你将 javascript 代码输入 javascript 引擎时，它会立即由 javascript 引擎执行。由于没有看过Engi
javascript - 如何将 JavaScript 变量从一个 JavaScript 文件传递到另一个 JavaScript 文件？
我在一个文件夹中有两个 javascript 文件。我想将一个变量的 javascript 文件传递到另一个。我应该使用什么程序？最佳答案 window.postMessage用于跨文档消息。使
javascript - javascript 中的 javascript 输入问题
我有一个练习，我需要输入两个输入并检查它们是否都等于一个。如果是 console.log 正则 console.log false 我试过这样的事情: function isPositive(fir
javascript - 在加载其他 javascript 库的页面上嵌入 Javascript？
我正在做一个Web应用程序，计划允许其他网站(客户端)在其页面上嵌入以下javascript: 我的网络应用程序位于 http://example.org 。我不能假设客户端网站的页面有 JQue
javascript - 从 Javascript 内部调用 Javascript
目前我正在使用三个外部 JS 文件。我喜欢将所有三个 JS 文件合而为一。尽一切可能。我创建 aio.js 并在 aio.js 中 src="https://code.jquery.com/
javascript - AngularJS/javascript javascript 对象的特殊排序顺序
我有例如像这样的数组: var myArray = []; var item1 = { start: '08:00', end: '09:30' } var item2 = {
javascript - 在 Javascript 内部执行 Javascript？
所以我正在制作一个 Chrome 扩展，它使用我制作的一些 TamperMonkey 脚本。我想要一个“主”javascript 文件，您可以在其中包含并执行其他脚本。我很擅长使用以下行将其他 jav
javascript - 如何将变量从 javascript 移动到 javascript？
我有 A、B html 和 A、B javascript 文件。并且，如何将 A JavaScript 中使用的全局变量直接移动到 B JavaScript 中？示例 JavaScript) va
javascript - 从 javascript 调用 javascript
我需要将以下整个代码放入名为 activate.js 的 JavaScript 中。你能告诉我怎么做吗？ var int = new int({ seconds: 30, mark
javascript - 将变量值从一个 JavaScript 传递到另一个 JavaScript
我已经为我的 .net Web 应用程序创建了母版页 EXAMPLE1.Master。他们的 I 将值存储在 JavaScript 变量中。我想在另一个 JS 文件中检索该变量。示例1.大师:-
javascript - 有没有开源库可以在浏览器中使用 Javascript 来整理 Javascript？
是否有任何库可以用来转换这样的代码: function () { var a = 1; } 像这样的代码: function () { var a = 1; } 在我的浏览器中。因为我在 Gi
javascript - javascript 中的参数列表后缺少语法 javascript 错误 )
我收到语法缺失 ) 错误 $(document).ready(function changeText() { var p = document.getElementById('bidp
javascript - 第一个 JavaScript 完成后启动第二个 JavaScript
我正在制作进度条。它有一个标签。我想调整某个脚本完成的标签。在找到可能的解决方案的一些答案后，我想出了以下脚本。第一个启动并按预期工作。然而，第二个却没有。它出什么问题了？代码如下: HTML:
javascript - 为什么外部 javascript 库会阻止我页面上的 javascript？
这里有一个很简单的问题，我简单的头脑无法回答:为什么我在外部库中加载时，下面的匿名和onload函数没有运行？我错过了一些非常非常基本的东西。 Library.js 只有一行:console.log(
javascript - 如何区分代码内 javascript 和客户端 javascript
我知道 javascript 是一种客户端语言，但如果实际代码中嵌入的 javascript 代码以某种方式与在控制台上运行的代码不同，我会尝试找到答案。让我用一个例子来解释它: 我想创建一个像 Mi
javascript - 将 Javascript 内联到不显眼的 JavaScript？
我如何将这个内联 javascript 更改为 Unobtrusive JavaScript？谢谢! 感谢您的回答，但它不起作用。我的代码是: PHP js文件 document.getElem
javascript - 如何将 JavaScript 对象导出为 JavaScript？
我正在寻找将简单的 JavaScript 对象“转储”到动态生成的 JavaScript 源代码中的最优雅的方法。目的:假设我们有 node.js 服务器生成 HTML。我们在服务器端有一个对象x。

行者123

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

javascript - 更改 Google Chart Sankey 图的链接颜色