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

Question

我目前正在使用 jvectormap。每个县都有一个数据代码(例如:48201)。这是我到目前为止已经着色的县的代码...

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

/* --------------- 活跃特许经营 --------------- */

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

/* --------------- 可用专营权 --------------- */

                '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',

/* --------------- 待定特许经营 --------------- */

                '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'
};

正如您在底部看到的...属性设置为“填充”。我还想添加“中风”。我该如何添加第二个属性？

Answer 1

javaScript 对象中的属性以逗号分隔。假设您想添加笔画宽度属性:

在这种情况下，您可以更改靠近底部的尾部，使其看起来像这样:

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

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

这应该会让你高兴。不过，顺便说一句，笔画宽度实际上是“区域”的第三个属性:您会注意到值以“值:{...}”的形式编写——它也是一个属性!