plotly 散点数据中的色标 plot

Question

Using marker:{color:x} in javascript plotly ( http://jsfiddle.net/d8bt1qof/ ), I can color-code my data:

But how can I change the colorscale?

Different colorscales seems to be available ( https://plotly.com/javascript/colorscales/ ), but the usage is only explained for heatmap plots. And adding colorscale: 'Portland' seems not to work.

Answer 1

scattergl trace markers can also have a colorschale . I found a reference for it in the documentation here :

colorscale Parent: data[type=scattergl].marker Type: colorscale Sets the colorscale. Has an effect only if in marker.color is set to a numerical array. The colorscale must be an array containing arrays mapping a normalized value to an rgb, rgba, hex, hsl, hsv, or named color string. At minimum, a mapping for the lowest (0) and highest (1) values are required. For example, [[0, 'rgb(0,0,255)'], [1, 'rgb(255,0,0)']] . To control the bounds of the colorscale in color space, use marker.cmin and marker.cmax . Alternatively, colorscale may be a palette name string of the following list: Greys,YlGnBu,Greens,YlOrRd,Bluered,RdBu,Reds,Blues,Picnic,Rainbow,Portland,Jet,Hot,Blackbody,Earth,Electric,Viridis,Cividis.

So an example based on your fiddle you could look like this:

var x = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10]

var trace1 = {
  x: x,
  y: x,
  mode: 'markers',
   marker: {
    size: 20,
    color: x,
    colorscale: 'Greens'
  },
};

Plotly.newPlot('myDiv', [trace1], {});