Plotly color not changing Javascript
Question
I working on a project that needs me to use graph csv file inputs. I've been using plotly and so far it seems to be working very well.
However, when I try to change the color of the graphs (lines and markers) it doesn't work. I am posting excerpts of my code since the color is overall a small portion of the code and I don't want to dump everything here.
//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'
}
Both the attempts just give me the standard black dots. When I tried constants that worked fine (something like color:'rgb(100,100,240)'). Is there something I'm missing here? I've console.logged this thing and it doesn't seem to be an issue with the structure of my vars.
2 answers
solution1
1 2020-03-31 11:59:23
You have too many quotation marks around your rgb strings. In order to avoid confusion when concatenating strings, you could also use template strings. See the working fiddle below.
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>
solution2
-1 ACCPTED 2020-03-31 16:15:16
The problem with my code is that I'm using vars. By switching to consts, I can fix the thing. I didn't catch the color not changing because for some reason the legend was displaying the right colors, but the markers and lines don't accept it.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.