如何在JavaScript中添加第二个属性？

Question

I am currently working with a jvectormap. Each county has a data-code (example: 48201). Here is my code for the counties that I have colored so far...

jvm.Map.maps = {};
jvm.Map.defaultParams = {
  map: 'us_lcc_en',series: {
        regions: [{
            values: {

/* --------------- Active Franchise --------------- */

                '42029':'#eb2e4d',
                '42091':'#eb2e4d',
                '42101':'#eb2e4d',
                '42045':'#eb2e4d',
                '42017':'#eb2e4d',
                '42077':'#eb2e4d',
                '42095':'#eb2e4d',
                '48085':'#eb2e4d',
                '48113':'#eb2e4d',
                '48439':'#eb2e4d',
                '48121':'#eb2e4d',

/* --------------- Available Franchise --------------- */

                '42129':'#5d9eec',
                '42007':'#5d9eec',
                '42125':'#5d9eec',
                '42019':'#5d9eec',
                '42003':'#5d9eec',
                '13067':'#5d9eec',
                '13121':'#5d9eec',
                '13057':'#5d9eec',
                '13135':'#5d9eec',
                '13089':'#5d9eec',
                '13063':'#5d9eec',
                '13151':'#5d9eec',
                '13297':'#5d9eec',
                '13117':'#5d9eec',
                '48339':'#5d9eec',
                '48201':'#5d9eec',
                '48157':'#5d9eec',
                '48167':'#5d9eec',
                '48039':'#5d9eec',
                '48029':'#5d9eec',
                '48187':'#5d9eec',
                '48091':'#5d9eec',
                '04013':'#5d9eec',
                '09003':'#5d9eec',
                '09013':'#5d9eec',
                '09001':'#5d9eec',
                '09009':'#5d9eec',
                '09007':'#5d9eec',
                '09005':'#5d9eec',

/* --------------- Pending Franchise --------------- */

                '48491':'#83a85d',
                '48453':'#83a85d',
                '48209':'#83a85d',

            },

            attribute:'fill',
            "stroke-width": 4

        }]

    },
  backgroundColor: '#ffffff',
  zoomButtons: true,
  zoomOnScroll: false,
  panOnDrag: true,
  zoomMax: 8,
  zoomMin: 1,
  zoomStep: 1.6,
  zoomAnimate: true,
  regionsSelectable: false,
  markersSelectable: false,
  bindTouchEvents: true,
  regionStyle: {
    initial: {
      fill: 'rgb(204, 204, 204)',
      "fill-opacity": 1,
      stroke: 'rgb(204, 204, 204)',
      "stroke-width": 0,
      "stroke-opacity": 1,
    },
    hover: {
      "fill-opacity": 0.7,
      cursor: 'pointer'
    },
    selected: {
      fill: 'yellow'
    },
    selectedHover: {
    }
  },
  regionLabelStyle: {
    initial: {
      'font-family': 'Verdana',
      'font-size': '12',
      'font-weight': 'bold',
      cursor: 'default',
      fill: 'black',
    },
    hover: {
      cursor: 'pointer'
    }
  },
  markerStyle: {
    initial: {
      fill: 'grey',
      stroke: '#505050',
      "fill-opacity": 1,
      "stroke-width": 1,
      "stroke-opacity": 1,
      r: 5
    },
    hover: {
      stroke: 'black',
      "stroke-width": 2,
      cursor: 'pointer'
    },
    selected: {
      fill: 'blue'
    },
    selectedHover: {
    }
  },
  markerLabelStyle: {
    initial: {
      'font-family': 'Verdana',
      'font-size': '12',
      'font-weight': 'bold',
      cursor: 'default',
      fill: 'black'
    },
    hover: {
      cursor: 'pointer'
    }
  }
};
jvm.Map.apiEvents = {
  onRegionTipShow: 'regionTipShow',
  onRegionOver: 'regionOver',
  onRegionOut: 'regionOut',
  onRegionClick: 'regionClick',
  onRegionSelected: 'regionSelected',
  onMarkerTipShow: 'markerTipShow',
  onMarkerOver: 'markerOver',
  onMarkerOut: 'markerOut',
  onMarkerClick: 'markerClick',
  onMarkerSelected: 'markerSelected',
  onViewportChange: 'viewportChange'
};

As you can see at the bottom...the attribute is set to 'fill'. I also want to add 'stroke'. How do I go about adding that second attribute?

Answer 1

Attributes in a javaScript object are separated by commas. Suppose you wanted to add a stroke-width attribute:

In this case, you would change the tail end, near the bottom, to look something like this:

            '48491':'#83a85d',
            '48453':'#83a85d',
            '48209':'#83a85d',

        },
        attribute: 'fill',
        stroke-width: 4
    }]
},

Which should make you happy. Though, as an aside, stroke-width will actually be the third attribute of 'regions': you'll note that values is written in the form of "values: {...}," -- it's an attribute too!