我正在玩Chartist.js,只是想知道你是否可以给我一个应用一些造型SVG的手.这是我的代码如下:
jQuery的:
new Chartist.Line('.ct-chart',{ labels: [1,2,3,4,5,6,7,8],series: [ [5,9,8,4] ] },{ low: 0,showArea: true });
HTML:
<div class="ct-chart ct-perfect-fourth"></div>
CSS:
.ct-chart .ct-series.ct-series-a .ct-area { fill: orange; } .ct-chart .ct-series.ct-series-a .ct-line { stroke: orange; } .ct-chart .ct-series.ct-series-a .ct-point { stroke: orange; } body { background: #203135; }
我只是试图模拟他们在这个令人敬畏的设计上发现的,它在运动中发现,每个数据点都有一个较暗的阴影/与背景相似的阴影的轮廓.我已经尝试在CSS中使用大纲,但它在数据点周围产生一个黑色(或任何颜色,我选择)的方形,我无法弄清楚如何得到圆
最后,这里是我已经在一个jsfiddle – http://jsfiddle.net/andyjh07/gLnkwLj0/
解决方法
您可以将数据点替换为默认值< line>元素由< circle>元件.这样可以控制圆笔画颜色,宽度和填充颜色.
var chart = new Chartist.Line('.ct-chart',10],23],] },showArea: true,linesmooth: Chartist.Interpolation.simple({ divisor: 2 }),}); chart.on('draw',function(data) { if (data.type === 'point') { var circle = new Chartist.Svg('circle',{ cx: [data.x],cy: [data.y],r: [7],},'ct-circle'); data.element.replace(circle); } });
<script src="https://cdnjs.cloudflare.com/ajax/libs/chartist/0.7.2/chartist.min.js"></script> <link href="https://cdnjs.cloudflare.com/ajax/libs/chartist/0.7.2/chartist.min.css" rel="stylesheet" /> <style> .ct-chart .ct-series.ct-series-a .ct-area {fill: orange;} .ct-chart .ct-series.ct-series-a .ct-line {stroke: orange;stroke-width: 3px;} .ct-circle {fill: orange;stroke-width: 5;stroke: #203135;} body {background: #203135;} </style> <div class="ct-chart ct-perfect-fourth"></div>
参考:http://gionkunz.github.io/chartist-js/examples.html#using-events-to-replace-graphics
原文地址:https://www.jb51.cc/js/154675.html
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。