Loading [MathJax]/jax/output/CommonHTML/config.js
首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
社区首页 >问答首页 >Amcharts时间线修改

Amcharts时间线修改
EN

Stack Overflow用户
提问于 2019-11-05 11:40:19
回答 1查看 547关注 0票数 1

我想更改项目符号中的图像,以便对时间线进行四舍五入。我正在尝试用css !important和jquery覆盖css。但是我不能改变子弹里面的图像

看看我的codepen https://codepen.io/levicosta201/pen/RwwQJXV

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
<div id="chartdiv" style="height: 500px !important;"></div>
<script src="https://www.amcharts.com/lib/4/core.js"></script>
<script src="https://www.amcharts.com/lib/4/charts.js"></script>
<script src="https://www.amcharts.com/lib/4/themes/material.js"></script>
<script src="https://www.amcharts.com/lib/4/themes/animated.js"></script>
<script src="https://www.amcharts.com/lib/4/plugins/timeline.js"></script>
<script src="https://www.amcharts.com/lib/4/plugins/bullets.js"></script>
<script>
//Chart IoTs sequence
am4core.ready(function() {
// Themes begin
am4core.useTheme(am4themes_animated);
// Themes end
am4core.ready(function() {
    var chart = am4core.create("chartdiv", am4plugins_timeline.CurveChart);
    chart.curveContainer.padding(100, 20, 50, 20);
    chart.maskBullets = false;
    var colorSet = new am4core.ColorSet();
    chart.dateFormatter.inputDateFormat = "yyyy-MM-dd HH:mm";
    chart.dateFormatter.dateFormat = "HH";
/*
* 提示:该行代码过长,系统自动注释不进行高亮。一键复制会移除系统注释 
* const iotIcon = "data:image/png;base64,/9j/4AAQSkZJRgABAQEASABIAAD/4TIiaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wLwA8P3hwYWNrZXQgYmVnaW49Iu+7vyIgaWQ9Ilc1TTBNcENlaGlIenJlU3pOVGN6a2M5ZCI/Pgo8eDp4bXBtZXRhIHhtbG5zOng9ImFkb2JlOm5zOm1ldGEvIiB4OnhtcHRrPSJBZG9iZSBYTVAgQ29yZSA1LjMtYzAxMSA2Ni4xNDU2NjEsIDIwMTIvMDIvMDYtMTQ6NTY6MjcgICAgICAgICI+CiAgIDxyZGY6UkRGIHhtbG5zOnJkZj0iaHR0cDovL3d3dy53My5vcmcvMTk5OS8wMi8yMi1yZGYtc3ludGF4LW5zIyI+CiAgICAgIDxyZGY6RGVzY3JpcHRpb24gcmRmOmFib3V0PSIiCiAgICAgICAgICAgIHhtbG5zOnhtcD0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wLyI+CiAgICAgICAgIDx4bXA6Q3JlYXRvclRvb2w+QWRvYmUgRmlyZXdvcmtzIENTNiAoV2luZG93cyk8L3htcDpDcmVhdG9yVG9vbD4KICAgICAgICAgPHhtcDpDcmVhdGVEYXRlPjIwMTktMDgtMTdUMTk6NTM6MzFaPC94bXA6Q3JlYXRlRGF0ZT4KICAgICAgICAgPHhtcDpNb2RpZnlEYXRlPjIwMTktMDgtMTdUMTk6NTM6NDNaPC94bXA6TW9kaWZ5RGF0ZT4KICAgICAgPC9yZGY6RGVzY3JpcHRpb24+CiAgICAgIDxyZGY6RGVzY3JpcHRpb24gcmRmOmFib3V0PSIiCiAgICAgICAgICAgIHhtbG5zOmRjPSJodHRwOi8vcHVybC5vcmcvZGMvZWxlbWVudICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAKICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIAogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgCiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAKICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIAogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgCiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAKICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIAogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgCiAgICAgICAgICAKICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIAogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgCiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAKICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIAogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgCiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAKICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIAogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgCiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAKICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIAogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgCiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAKICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIAogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgCiAgICAgICAgICAgICAgICAgICAgICAgICAgICAKPD94cGFja2V0IGVuZD0idyI/Pv/bAEMABwQEBAUEBwUFBwoHBQcKDAkHBwkMDQsLDAsLDRENDQ0NDQ0RDQ8QERAPDRQUFhYUFB4dHR0eIiIiIiIiIiIiIv/bAEMBCAcHDQwNGBAQGBoVERUaICAgICAgICAgICAgICEgICAgICAhISEgICAhISEhISEhISIiIiIiIiIiIiIiIiIiIv/AABEIAMwAzAMBEQACEQEDEQH/xAAcAAEAAgMBAQEAAAAAAAAAAAAAAQIEBQYDBwj/xABGEAABAwIDAwcIBQsDBQAAAAAAAQIDBAUREjEGIUEHEyJRYXGRFDJCcoGhsdEjJDNSwRU0NUNTYnOCkrLhNsLSZJOis/D/xAAUAQEAAAAAAAAAAAAAAAAAAAAA/8QAFBEBAAAAAAAAAAAAAAAAAAAAAP/aAAwDAQACEQMRAD8A/SIACjtQIAAAAAAAAAAAAAAAAAAAAAAAXboBIAAAAo7UCAAAAAAAFVETFdycVA09x2ws9G5WNcs8qehHp4rgBpqjlArnL9Xp42JwzKrl/ADGXbm+rxiT+X/IEt26viJv5p3bl/yBl0vKFMi/WqZFbxWNcF8N4G9tu0tpuC5IpMsq/q39FfZqigbICAAAAAAAXboBIAAAAo7UCAAAAAA86qqgpIHVE7skTExc4DhL9tRV3N6xxqsVHwYmrk63fIDUgAAAABDnNamZd2HEDe7M7dywTNpbkualdujn9JnY7s7QO4a5rmo5u9q70VOoCQAAAAAu3QCQAAABR2oEAAAACQOF2vvbq6tWkiX6pAu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";
*/
    chart.data = [{
            "category": "Aiknow - Entrance",
            "start": "2019-08-30 12:05",
            "end": "2019-08-30 16:25",
            "color": "#F60",
            "icon": iotIcon,
            "text": "Aiknow - Entrance"
        },
        {
            "category": "Aiknow - Entrance",
            "start": "2019-08-30 16:25",
            "end": "2019-08-30 19:40",
            "color": "#F00",
            "icon": iotIcon,
            "text": "Aiknow - Entrance"
        },
        {
            "category": "Aiknow - Entrance",
            "start": "2019-08-30 19:40",
            "end": "2019-08-30 19:43",
            "color": "#690310",
            "icon": iotIcon,
            "text": "Aiknow - Entrance"
        }
    ];
    chart.fontSize = 10;
    chart.tooltipContainer.fontSize = 10;
    var categoryAxis = chart.yAxes.push(new am4charts.CategoryAxis());
    categoryAxis.dataFields.category = "category";
    categoryAxis.renderer.grid.template.disabled = true;
    categoryAxis.renderer.labels.template.paddingRight = 25;
    categoryAxis.renderer.minGridDistance = 10;
    categoryAxis.renderer.innerRadius = 10;
    categoryAxis.renderer.radius = 30;
    var dateAxis = chart.xAxes.push(new am4charts.DateAxis());
    dateAxis.renderer.points = getPoints();
    dateAxis.renderer.autoScale = false;
    dateAxis.renderer.autoCenter = false;
    dateAxis.renderer.minGridDistance = 30;
    dateAxis.baseInterval = { count: 1, timeUnit: "minute" };
    dateAxis.renderer.tooltipLocation = 0;
    dateAxis.renderer.line.strokeDasharray = "1,4";
    dateAxis.renderer.line.strokeOpacity = 0.5;
    dateAxis.tooltip.background.fillOpacity = 0.2;
    dateAxis.tooltip.background.cornerRadius = 5;
    dateAxis.tooltip.label.fill = new am4core.InterfaceColorSet().getFor("alternativeBackground");
    dateAxis.tooltip.label.paddingTop = 7;
    dateAxis.endLocation = 0;
    dateAxis.startLocation = -0.5;
    dateAxis.min = new Date(2019, 7, 29, 12, 5).getTime();
    dateAxis.max = new Date(2019, 8, 1, 19, 43).getTime();    
    var labelTemplate = dateAxis.renderer.labels.template;
    labelTemplate.verticalCenter = "middle";
    labelTemplate.fillOpacity = 0.6;
    labelTemplate.background.fill = new am4core.InterfaceColorSet().getFor("background");
    labelTemplate.background.fillOpacity = 1;
    labelTemplate.fill = new am4core.InterfaceColorSet().getFor("text");
    labelTemplate.padding(7, 7, 7, 7);
    var series = chart.series.push(new am4plugins_timeline.CurveColumnSeries());
    series.columns.template.height = am4core.percent(30);
    series.dataFields.openDateX = "start";
    series.dataFields.dateX = "end";
    series.dataFields.categoryY = "category";
    series.baseAxis = categoryAxis;
    series.columns.template.propertyFields.fill = "color"; // get color from data
    series.columns.template.propertyFields.stroke = "color";
    series.columns.template.strokeOpacity = 0;
    series.columns.template.fillOpacity = 0.6;
    var imageBullet1 = series.bullets.push(new am4plugins_bullets.PinBullet());
    imageBullet1.background.radius = 18;
    imageBullet1.locationX = 1;
    imageBullet1.propertyFields.stroke = "color";
    imageBullet1.background.propertyFields.fill = "color";
    imageBullet1.image = new am4core.Image();
    imageBullet1.image.propertyFields.href = "icon";
    imageBullet1.image.scale = 0.7;
    imageBullet1.circle.radius = 20;
    imageBullet1.background.fillOpacity = 0.8;
    imageBullet1.background.strokeOpacity = 0;
    imageBullet1.dy = -2;
    imageBullet1.background.pointerBaseWidth = 10;
    imageBullet1.background.pointerLength = 10
    imageBullet1.tooltipText = "{text}";
    series.tooltip.pointerOrientation = "up";
    imageBullet1.background.adapter.add("pointerAngle", (value, target) => {
        if (target.dataItem) {
            var position = dateAxis.valueToPosition(target.dataItem.openDateX.getTime());
            return dateAxis.renderer.positionToAngle(position);
        }
        return value;
    });
    var hs = imageBullet1.states.create("hover")
    hs.properties.scale = 1.3;
    hs.properties.opacity = 1;
    var textBullet = series.bullets.push(new am4charts.LabelBullet());
    textBullet.label.propertyFields.text = "text";
    textBullet.disabled = true;
    textBullet.propertyFields.disabled = "textDisabled";
    textBullet.label.strokeOpacity = 0;
    textBullet.locationX = 1;
    textBullet.dy = - 100;
    textBullet.label.textAlign = "middle";
    chart.scrollbarX = new am4core.Scrollbar();
    chart.scrollbarX.align = "center"
    chart.scrollbarX.width = am4core.percent(75);
    chart.scrollbarX.parent = chart.curveContainer;
    chart.scrollbarX.height = 300;
    chart.scrollbarX.orientation = "vertical";
    chart.scrollbarX.x = 128;
    chart.scrollbarX.y = -140;
    chart.scrollbarX.isMeasured = false;
    chart.scrollbarX.opacity = 0.5;
    var cursor = new am4plugins_timeline.CurveCursor();
    chart.cursor = cursor;
    cursor.xAxis = dateAxis;
    cursor.yAxis = categoryAxis;
    cursor.lineY.disabled = true;
    cursor.lineX.disabled = true;
    dateAxis.renderer.tooltipLocation2 = 0;
    categoryAxis.cursorTooltipEnabled = false;
    chart.zoomOutButton.disabled = true;
    var previousBullet;
    chart.events.on("inited", function() {
        setTimeout(function() {
            hoverItem(series.dataItems.getIndex(0));
        }, 2000)
    })
    function hoverItem(dataItem) {
        var bullet = dataItem.bullets.getKey(imageBullet1.uid);
        var index = dataItem.index;
        if (index >= series.dataItems.length - 1) {
            index = -1;
        }
        if (bullet) {
            if (previousBullet) {
                previousBullet.isHover = false;
            }
            bullet.isHover = true;
            previousBullet = bullet;
        }
        setTimeout(
            function() {
                hoverItem(series.dataItems.getIndex(index + 1))
            }, 1000);
    }
});
function getPoints() {
    var points = [{ x: -1300, y: 200 }, { x: 0, y: 200 }];
    var w = 400;
    var h = 400;
    var levelCount = 4;
    var radius = am4core.math.min(w / (levelCount - 1) / 2, h / 2);
    var startX = radius;
    for (var i = 0; i < 25; i++) {
        var angle = 0 + i / 25 * 90;
        var centerPoint = { y: 200 - radius, x: 0 }
        points.push({ y: centerPoint.y + radius * am4core.math.cos(angle), x: centerPoint.x + radius * am4core.math.sin(angle) });
    }
    for (var i = 0; i < levelCount; i++) {
        if (i % 2 != 0) {
            points.push({ y: -h / 2 + radius, x: startX + w / (levelCount - 1) * i })
            points.push({ y: h / 2 - radius, x: startX + w / (levelCount - 1) * i })
            var centerPoint = { y: h / 2 - radius, x: startX + w / (levelCount - 1) * (i + 0.5) }
            if (i < levelCount - 1) {
                for (var k = 0; k < 50; k++) {
                    var angle = -90 + k / 50 * 180;
                    points.push({ y: centerPoint.y + radius * am4core.math.cos(angle), x: centerPoint.x + radius * am4core.math.sin(angle) });
                }
            }
            if (i == levelCount - 1) {
                points.pop();
                points.push({ y: -radius, x: startX + w / (levelCount - 1) * i })
                var centerPoint = { y: -radius, x: startX + w / (levelCount - 1) * (i + 0.5) }
                for (var k = 0; k < 25; k++) {
                    var angle = -90 + k / 25 * 90;
                    points.push({ y: centerPoint.y + radius * am4core.math.cos(angle), x: centerPoint.x + radius * am4core.math.sin(angle) });
                }
                points.push({ y: 0, x: 1300 });
            }
        }
        else {
            points.push({ y: h / 2 - radius, x: startX + w / (levelCount - 1) * i })
            points.push({ y: -h / 2 + radius, x: startX + w / (levelCount - 1) * i })
            var centerPoint = { y: -h / 2 + radius, x: startX + w / (levelCount - 1) * (i + 0.5) }
            if (i < levelCount - 1) {
                for (var k = 0; k < 50; k++) {
                    var angle = -90 - k / 50 * 180;
                    points.push({ y: centerPoint.y + radius * am4core.math.cos(angle), x: centerPoint.x + radius * am4core.math.sin(angle) });
                }
            }
        }
    }
    return points;
}
}); // end am4core.ready()
</script>

你能帮我在子弹里的图片周围加上一个边框半径吗?

EN

回答 1

Stack Overflow用户

回答已采纳

发布于 2019-11-07 02:41:51

您可以调整项目符号内circlebackground对象中的radius属性,以使用圆角边缘遮罩图像,同时控制项目符号的大小。在您的示例中,将圆半径减小到13就足够了:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
    var imageBullet1 = series.bullets.push(new am4plugins_bullets.PinBullet());
    // ...
    imageBullet1.circle.radius = 13;

Updated codepen

您可能会发现bullet plugin tutorial中的bullet configuration tool对于理解某些属性如何影响项目符号的外观很有用。

票数 1
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/58710608

复制
相关文章
如何将多个 kubeconfig 文件合并为一个?
项目通常有多个 k8s 集群环境,dev、testing、staging、prod,kubetcl 在多个环境中切换,操作集群 Pod 等资源对象,前提条件是将这三个环境的配置信息都写到本地机的 $HOME/.kube/config 文件中。
我的小碗汤
2023/03/19
2.4K0
如何将多个 kubeconfig 文件合并为一个?
python根据已有文件名的文件复制文件到新文件夹中
最近需要对一些图片进行整理,需要从一堆图片中将已经存在在文件中的图片移动到另外一个新的文件夹中,所以就特意就写了一个小玩意方便使用.下面是代码实现:
小海怪的互联网
2019/10/14
3.8K0
Java 将两个Map对象合并为一个Map对象
实现方式是通过 putAll() 方法将多个 map 对象中的数据放到另外一个全新的 map 对象中,代码如下所示,展示了两个 map 对象的合并,如果是多个 map 合并也是用这种方式。
程序员十三
2018/12/28
4.6K0
java将字符串存入GridF并通过id或文件名查询
import static org.bson.codecs.configuration.CodecRegistries.fromProviders; import static org.bson.codecs.configuration.CodecRegistries.fromRegistries; import java.io.ByteArrayInputStream; import java.io.ByteArrayOutputStream; import java.io.InputStream; i
HUC思梦
2020/09/03
8650
python两个列表合并为字典,一个作为
两个列表合并为一个字典函数list_dic(list1,list2)可以直接复制拿走
py3study
2020/01/17
2.4K0
Java中如何把两个数组合并为一个
http://freewind.me/blog/20110922/350.html
全栈程序员站长
2022/09/07
1.3K0
pycharm创建第一个程序_python创建新文件
发布者:全栈程序员栈长,转载请注明出处:https://javaforall.cn/174511.html原文链接:https://javaforall.cn
全栈程序员站长
2022/09/27
4930
pycharm创建第一个程序_python创建新文件
如何将文件名称批量导入excel
不给赞赏的话给个赞或者关注下公众号TungHsu吧,不会让你失望的,好玩的数据,免费的软件,学习资料和方法。
用户1315847
2018/07/26
4.7K0
如何将文件名称批量导入excel
Go处理字符串到合法文件名
使用filenamify库 Demo package main import ( "github.com/flytam/filenamify" "fmt" ) func main() { output,err :=filenamify.Filenamify(`<foo/bar>`,filenamify.Options{}) fmt.Println(output,err) // => foo!bar,nil //--- output,err =filenamify.Filen
ACK
2020/02/18
9780
如何删除一个文件名以分号开头的文件
该文讲述了如何删除一个文件名以分号开头的文件。作者通过在Linux上使用VIM编辑器不小心创建了一个文件名以分号开头的文件,尝试使用多种方法删除该文件,包括使用rm命令和转义字符。最后,作者通过在rm命令中添加转义字符成功删除了该文件。
雷大亨
2018/01/01
2.3K0
vscode 设置打开新文件不覆盖前一个窗口
vscode 打开文件时如果会覆盖掉原来窗口中打开的未做修改的文件,非常影响使用体验
Leophen
2020/11/03
6.7K0
vscode 设置打开新文件不覆盖前一个窗口
/var/spool/postfix/maildrop/ 中有大量的文件
今天查看硬盘剩余的容量,发现‘/’目录下占用了大量的空间;可我在这个目录下面没有放什么东西;仔细查看在/var/spool/postfix/maildrop/ 中发现了大量的文件。怎么会有这么多的文件呢,先删除。
双面人
2019/04/10
1.7K0
Python压缩新文件到已有ZIP文件
本文要点在于使用Python标准库zipfile创建压缩文件时,如果使用'a'模式时,可以追加新内容。 from zipfile import ZipFile from os import listdir from os.path import isfile, isdir, join def addFileIntoZipfile(srcDir, fp): #遍历该文件夹中所有文件 for subpath in listdir(srcDir): subpath = join(srcDir,
Python小屋屋主
2018/04/16
1.2K0
Python文件名后缀_python获取目录下所有文件的文件名
使用 os.path.splitext(file)[0] 可获得 文件名 。 使用 os.path.splitext(file)[-1] 可获得以 . 开头的 文件后缀名 。
全栈程序员站长
2022/11/09
4.6K0
当一个文件中有个证书链
公众号是真的好久没更新了,实在抱歉,过年之后到现在终于觉得开始清闲了一下,最近一直在整理在日本时候的照片,主要是最后一个月末赶上了樱花季,得以观赏了樱花盛开的画面,之后跟大家分享一下。
琉璃康康
2022/04/19
5350
两个数组合并成一个数组 请把两个数组 ['A1', 'A2', 'B1', 'B2', 'C1', 'C2', 'D1', 'D2'] 和 ['A', 'B', 'C', 'D'],合并为 ['...
方案1 let arr1 = ['A1', 'A2', 'B1', 'B2', 'C1', 'C2', 'D1', 'D2'] let arr2 = ['A', 'B', 'C', 'D'] arr2 = arr2.map(v => `${v}3`); let arr3=[...arr1, ...arr2].sort().map(v => v.replace('3', '')) console.log(arr3) 方案2 let arr1 = ['A1', 'A2', 'B1', 'B
刘嘿哈
2022/10/25
2K0
算法练习(20) - 将一个交错数据合并为一个一维数组
编程题(20分钟) 将一个交错数据合并为一个一维数组 输入: strJaggedArray[][], 由多个一维数组(长度不定,个数不定)组成的交错数组 输出: strArray[], 由strJaggedArray[r][c]中的元素以"&"为分隔符拼合而成, 是strJaggedArray中数组元素的无重复组合(不考虑顺序)
惊羽-布壳儿
2022/06/15
6140
linux的文件名的长度限制_linux补全文件名
编写本文档,主要目的是为了验证linux下文件数、目录数、文件名长度的各种限制二、文档内容
全栈程序员站长
2022/11/01
5.9K0
Java将两个升序链表合并为一个新的 升序 链表并返回。新链表是通过拼接给定的两个链表的所有节点组成
By CaesarChang 合作: root121toor@gmail.com ~关注我 带你看更多精品技术和面试必备 示例: 输入:1->2->4, 1->3->4 输出:1->1->2->3->4->4 我们设定一个哨兵节点 prehead 和新链表,让prehead等于新链表,我们维护一个 pre,我们需要做的是调整它的 next 指针。然后,我们重复以下过程,直到 l1 或者 l2 指向了 null :如果 l1 当前节点的值小于等于 l2
CaesarChang张旭
2021/01/26
1.6K0
点击加载更多

相似问题

Python -将csv文件合并为一个共同轴

32

熊猫将表合并为两个共同的列

24

将“”改为“。文件名中有"_“

12

将多个文件合并为一个文件,包括文件名。

40

将新文件名传回jquery

11
添加站长 进交流群

领取专属 10元无门槛券

AI混元助手 在线答疑

扫码加入开发者社群
关注 腾讯云开发者公众号

洞察 腾讯核心技术

剖析业界实践案例

扫码关注腾讯云开发者公众号
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档
查看详情【社区公告】 技术创作特训营有奖征文