Beispiel für eine benutzerdefinierte Farbpalette für eine benutzerdefinierte Visualisierung

In diesem Beispiel wird gezeigt, wie Sie eine benutzerdefinierte Farbpalette für eine Visualisierung festlegen.

Erstellen Sie im Objekt options zwei Farbbereiche (mit benutzerdefinierter Eingabe):

    colorPreSet:
    {
      type: 'string',
      display: 'select',
      label: 'Color Range',
      section: 'Data',
      values: [{'Custom': 'c'},
      {'Tomato to Steel Blue': '#F16358,#DF645F,#CD6566,#BB666D,#A96774,#97687B,#856982,#736A89,#616B90,#4F6C97,#3D6D9E'},
      {'Pink to Black': '#170108, #300211, #49031A, #620423, #79052B, #910734, #AA083D, #C30946, #DA0A4E, #F30B57, #F52368, #F63378, #F63C79, #F75389, #F86C9A, #F985AB, #FB9DBC, #FCB4CC, #FDCDDD, #FEE6EE'},
      {'Green to Red': '#7FCDAE, #7ED09C, #7DD389, #85D67C, #9AD97B, #B1DB7A, #CADF79, #E2DF78, #E5C877, #E7AF75, #EB9474, #EE7772'},
      {'White to Green': '#ffffe5,#f7fcb9 ,#d9f0a3,#addd8e,#78c679,#41ab5d,#238443,#006837,#004529'}],
        default: 'c',
      order: 1
    },
    colorRange: {
      type: 'array',
      label: 'Custom Color Ranges',
      section: 'Data',
      order: 2,
      placeholder: '#fff, red, etc...'
    },

Fügen Sie der Funktion update Folgendes hinzu:

    if (settings.colorPreSet  == 'c') {
      var colorSettings =  settings.colorRange || ['white','green','red']; // put a default in
    } else {
      var colorSettings =  settings.colorPreSet.split(",");
    };