绘图颜色不变 Javascript

Question

我从事的项目需要我使用图形 csv 文件输入。我一直在使用 plotly，到目前为止它似乎工作得很好。

但是，当我尝试更改图表（线条和标记）的颜色时，它不起作用。我发布了我的代码摘录，因为颜色总体上只是代码的一小部分，我不想在这里转储所有内容。

//There's multiple charts so changing color is important
var r = Math.random() * 256
var g = Math.random() * 256
var b = Math.random() * 256

...
//used these as a vars so I can change things to test easily (multiple time series being used)
 var color='rgb('+r+', '+g+', '+b+')'
var colora='rgba('+r+', '+g+', '+b+', '+'0.14'+')' 

...
//layout of markers
{
                x: time,
                y: time,
                z: data1,
                line: {
                  reversescale: false,

                  //color: "'"+color+"'" 
                  color: "'rgb("+r+', ' +g+', '+ b+")'",

                },
                //mode: 'lines',
                marker: {
                  //color: "'"+color+"'",
                  color: "'rgb("+r+', ' +g+', '+ b+")'",
                  size: 3,
                  line: {
                    //color: "'"+colora+"'",
                    color: "'rgb("+r+', ' +g+', '+ b+")'",
                    width: 0.1
                  },
                  opacity: 0.8
                },
                type: 'scatter3d'
              }

这两种尝试都给我标准的黑点。当我尝试运行良好的常量时（类似于颜色：'rgb(100,100,240)'）。我在这里缺少什么吗？我有 console.logged 这个东西，它似乎不是我的 vars 结构的问题。

Answer 1

您的 rgb 字符串周围的引号过多。为了避免在连接字符串时出现混淆，您还可以使用模板字符串。请参阅下面的工作 fiddle。

const r = 0;
const g = 255;
const b = 0;
const color = 'rgb(' + r + ',' + g + ',' + b + ')';
const colorTemplate = `rgb(${r},${g},${b})`;

var trace1 = {
  x: [1, 2, 3, 4],
  y: [10, 15, 13, 17],
  type: 'scatter',
  marker: {
    color: color
  }
};

var trace2 = {
  x: [1, 2, 3, 4],
  y: [16, 5, 11, 9],
  type: 'scatter',
  marker: {
    color: colorTemplate
  }
};

var data = [trace1, trace2];

Plotly.newPlot('myDiv', data);

<head>
 <!-- Load plotly.js into the DOM -->
 <script src='https://cdn.plot.ly/plotly-latest.min.js'></script>
</head>

<body>
 <div id='myDiv'><!-- Plotly chart will be drawn inside this DIV --></div>
</body>

Answer 2

我的代码的问题是我使用的是变量。通过切换到 consts，我可以解决这个问题。我没有注意到颜色没有改变，因为出于某种原因，图例显示了正确的颜色，但标记和线条不接受它。

绘图颜色不变 Javascript

Plotly color not changing Javascript

html

javascript

plotly.js