Html 如何在传单中制作水平图例？

我想制作一个像这样的水平图例：

我不想要所有其他的，只有传说和颜色。我不知道如何将页面上的代码集成到我的实际代码中：

function getColor(d) {
         return d > 0.7    ? '#b2182b' :
            d > 0.5    ? '#d6604d' :
            d > 0.3    ? '#f4a582' :
            d > 0.1    ? '#fddbc7' :
            d > -0.1   ? '#f7f7f7' :
            d > -0.3   ? '#d1e5f0' :
            d > -0.5   ? '#92c5de' :
            d > -0.7   ? '#4393c3' :

                        '#2166ac';
}

function style(feature) {
    return {
        weight: 2,
        opacity: 1,
        color: 'white',
        dashArray: '3',
        fillOpacity: 0.65,
        fillColor: getColor(feature.properties.differentiel)
    };
}

function highlightFeature(e) {
    var layer = e.target;

    layer.setStyle({
        weight: 5,
        color: '#666',
        dashArray: '',
        fillOpacity: 0.65
    });

    if (!L.Browser.ie && !L.Browser.opera && !L.Browser.edge) {
        layer.bringToFront();
    }

    info.update(layer.feature.properties);
}

var geojson;

function resetHighlight(e) {
    geojson.resetStyle(e.target);
    info.update();
}

function zoomToFeature(e) {
    map.fitBounds(e.target.getBounds());
}

function onEachFeature(feature, layer) {
    layer.on({
        mouseover: highlightFeature,
        mouseout: resetHighlight,
        click: zoomToFeature
    });
}

geojson = L.geoJson(statesData, {
    style: style,
    onEachFeature: onEachFeature
}).addTo(map);

map.attributionControl.addAttribution('later');


var legend = L.control({position: 'bottomright'});

legend.onAdd = function (map) {

    var div = L.DomUtil.create('div', 'info legend'),
        grades = [-0.7, -0.5, -0.3, -0.1, 0.1, 0.3, 0.5, 0.7],
        labels = ['test'],
        from, to;

    for (var i = 0; i < grades.length; i++) {
        from = grades[i];
        to = grades[i + 1];

        labels.push(
            '<i style="background:' + getColor(from + 1) + '"></i> ' +
            from + (to ? ' to ' + to : '+'));
    }

    div.innerHTML = labels.join('<br>');
    return div;
};

legend.addTo(map);

函数getColor（d）{ 返回d>0.7？“#b2182b”： d>0.5？“#d6604d”： d>0.3？'#f4a582'： d>0.1？“#fddbc7”： d>-0.1？“#F7F7”： d>-0.3？“#d1e5f0”： d>-0.5？“#92c5de”： d>-0.7？“#4393c3”： "2166ac",； } 功能样式（特征）{ 返回{ 体重：2， 不透明度：1， 颜色：'白色'， dashArray:'3'， 不透明度：0.65， fillColor:getColor（feature.properties.differentiel） }; } 功能高亮功能（e）{ var层=e.目标； layer.setStyle({ 体重：5， 颜色：'#666'， dashArray:“”， 不透明度：0.65 }); 如果（！L.Browser.ie&&！L.Browser.opera&&！L.Browser.edge）{ 层。布氏体（）； } 信息更新（图层、特征、属性）； } var-geojson； 功能重置突出显示（e）{ geojson.resetStyle（e.target）； info.update（）； } 函数ZoomTof性质（e）{ fitBounds（e.target.getBounds（））； } 功能onEachFeature（功能，图层）{ 分层({ 鼠标悬停：Highlight功能， mouseout:resetHighlight， 单击：缩放自然 }); } geojson=L.geojson（statesData{ 风格：风格， onEachFeature:onEachFeature }).addTo（地图）； map.attributecontrol.addAttribute（'later'）； var legend=L.control（{position:'bottomright'}）； legend.onAdd=函数（映射）{ var div=L.DomUtil.create（'div'，'info legend'）， 等级=[-0.7，-0.5，-0.3，-0.1,0.1,0.3,0.5,0.7]， 标签=['test']， 从,到,； 对于（变量i=0；i”）； 返回div； }; 图例。添加到（地图）；

---

我试图替换大部分代码，但没有成功。我怎样才能用我的数据得到一个漂亮干净的图例？谢谢

这里有一个资源可以解决您的问题。这里有一个资源可以解决您的问题。