使用SVG和Vue重新创建动态圆环图

文章/答案/技术大牛

发布

1回答

javascript、vue.js、svg、donut-chart

我需要一个动态的环形图与SVG和Vue。它必须与此页面上的SVG完全相同：也许这是错误的方向，但这就是我能够找到并修改的任务All code in codeopen.io我真的很不擅长复杂的svg。

浏览 17提问于2019-08-18得票数 0

1回答

调整使用SVG圆的圆环图的大小，同时保持分段的比例

html、svg

我是，详细介绍了如何使用SVG圆和笔划创建圆环图。这是基本代码(但请参阅jsfiddle了解全部内容) <svg width="100%

浏览 1提问于2017-07-13得票数 1

回答已采纳

3回答

在HTML/CSS中创建梯度Torus

html、css、gradient

简单地说，我需要在一个具有透明背景的动态大小的圆上设置一个梯度。是否有方法在CSS/HTML中重新创建下面的图像？更新:这种效果在SVG中是很容易实现的，但是我想知道HTML/CSS实现它的唯一方法。参见本例：

浏览 6提问于2015-10-14得票数 1

回答已采纳

1回答

影响Servicenow上其他d3图表的AngularJS脚本下拉列表

javascript、html、angularjs、d3.js、servicenow

我最近使用Servicenow Portal Page创建了一个报告。作为背景，可以通过将小部件拖放到容器中来创建Servicenow门户页面。我可以成功地创建4个这样的小部件并添加到一个页面中。每个小部件使用d3和对数据库的API调用形成一个小的SVG报告。我最近创建了一个带有d3甜甜圈报告的新小部件。此圆环图有一个下拉菜单，更改后将重新渲染圆环图以可视化不同

浏览 8提问于2019-03-08得票数 1

回答已采纳

2回答

跨浏览器svg圆环图

svg、charts、d3.js

我使用了以下技巧：它使用d3和SVG来呈现圆环图。var vis = d3.select("#pie-chart").append("svg:svg").attr("height", h); 我需要应用/包含哪些内容才能在IE 7和8中工作？

浏览 2提问于2013-07-26得票数 0

1回答

Vue支持svg元素吗？

vue.js、svg

我想要生成使用svg标签的svg组件。Vue支持这个吗？请注意，svg元素需要在corretc命名空间中创建，vue可能无法立即处理。

浏览 4提问于2020-06-05得票数 0

回答已采纳

1回答

d3:动画条形图转换成饼图，像Heer和Robertson做的那样？

animation、d3.js

使用d3创建像中那样的动画有多难？特别是，如何平滑地将条形图转换为圆环图，再将其转换为饼图？我的想法是首先将条形图中的“矩形”替换为由d3.svg.arc形成的“路径”元素-使用具有巨大半径的圆弧，但仅取楔形，因此它看起来几乎像一个“矩形”，但略有弯曲。替换完成后，您可以在"path“元素中设置弧线的半径和角度，并将其移动到您想要的圆环形状中。从甜甜圈到馅饼的最终过渡将是微不足道的，只需为innerRadius设置动画即可。

浏览 0提问于2013-03-02得票数 1

1回答

当工作簿在Tableau中打开时，如何使参数上的整数数据类型自动更新数字？

dynamic、parameters、integer、tableau-api

我在自动更新/刷新圆环图上的百分比时遇到问题。我创建了一个参数并将其插入到我的计算字段中，但每次我关闭仪表板并重新打开它时，我都必须手动更新参数，以便在甜甜圈上更新百分比。我尝试转到参数中的“当工作簿打开时的值”字段，但从我的数据源出现的唯一字段是我用来创建实际圆环图的" donut“值。甜甜圈字段的值当然是0，因为这是用来创建我的甜甜圈的。如何使百分比动态变化？

浏览 44提问于2020-09-15得票数 0

2回答

如何在svg中居中放置圆环图

javascript、html、css、d3.js

我有下面的选项卡面板，我想在其中水平居中显示svg元素。我的css适用于第一个svg元素(柱状图)，但不适用于第三个元素(圆环图)。如何使圆环图在其父svg中居中？Here是我正在编写的代码。id="chart1" width="900" height="400"></svg> <div r

浏览 44提问于2020-07-15得票数 0

1回答

压缩类并更改属性

sass

我有一个有5个状态(0 - 5)的圆环图。我在一个Vue应用程序中使用它，圆环图的状态根据信息而变化。我已经创建了5个类来表示图表的5个步骤。步骤0= 0%，步骤1= 20%，依此类推。svg元素接受一个stroke-dasharray属性，这显示了图表被填充的程度。因此，我为这些步骤创建了5个css类： .donut-segment-0 {} @keyframes donut

浏览 5提问于2020-11-02得票数 0

3回答

SVG变换旋转90度、180度或270度在Safari iOS 10中圆上不起作用

ios、svg、mobile-safari、ios10

我想通过设置stroke-dasharray和变化stroke-dashoffset来使用SVG circle元素创建一个圆环图。SVG元素需要旋转270 (或-90)度，以便图表“条形图”从顶部开始。代码如下：在iOS 9.3.5上的Sa

浏览 9提问于2016-11-02得票数 18

回答已采纳

1回答

要作为VueJS /VueMaterial元素属性的值传递的动态属性

javascript、vue.js、vuejs2、vue-component、vue-material

我在我的项目中使用Vue 2.6.12以及Vue & Laravel Mix和Webpack进行资产管理。而且我对VueJS还是个新手。现在，我需要将动态VueJS属性值作为值传递给现有的HTML/VueMaterial元素属性作为它的值，如下所示： <md-icon md-src="{{iconPath}}{{iconName}}-icon-{{iconColor}}.svg"> 我知道使用VueJS我们可以从属性<

浏览 11提问于2020-10-09得票数 0

回答已采纳

1回答

Vue.js中的动态类绑定SVG

vue.js、svg

下面使用数组语法一次性绑定静态和动态类。静态可以工作，但动态不能。动态类绑定如何与SVG一起工作？https://codesandbox.io/s/dynamic-class-binding-svg-in-vue-js-jc5qg <!DOCTYPE html> <head> <script src="https:/

浏览 30提问于2020-06-30得票数 0

回答已采纳

2回答

vuejs作用域样式不适用于d3js

d3.js、vue.js

我正在尝试集成Vue.js和D3.js。我注意到的是，有时CSS类并不能真正处理svg元素。下面我给出了vue组件的代码片段。<template> <h1>Hello world</h1></div

浏览 2提问于2019-01-29得票数 4

1回答

在Vue组件中向SVG添加样式元素

vue.js、svg

我正在编写一个Vue组件，它动态地呈现一个SVG。通常在Vue模板中不允许使用<style>标记，但是在这种特殊情况下有允许它的方法吗？根据安装项目的方式()，下面的代码将抛出一个错误，或者生成一个没有样式标记的svg： <svg :width="svgWidth" :height="svgHeight"><style>rect{fill:red}<&

浏览 2提问于2020-10-05得票数 3

回答已采纳

1回答

(如何)我们可以创建带有范围标签的半圆环图？

javascript、highcharts、donut-chart

我想创建这种半圆形的圆环图。{ "y": 9, "end": "-15%"] 起始点和结束点

浏览 6提问于2015-08-26得票数 2

1回答

具有设置行和列的SSRS图例

reporting-services

我需要饼图\圆环图的图例，我可以在其中指定图例中的列数和行数。这需要是动态的，因为序列值将发生变化，因此一个饼可能是Geography，一个可能是行业，依此类推。因此，作为示例，图例将位于圆环下面，并且具有2列，每列5个值。请原谅我的下流截图。如果不能用图例来完成，任何其他建议都将不胜感激。谢

浏览 1提问于2019-03-01得票数 1

1回答

d3更改饼图位置(中点)

javascript、svg、d3.js、gauge

有没有办法在D3中改变饼图的位置？似乎我只能设置内径和外径，而不能设置中心。我想在我的圆环图(仪表)周围画另一个圆圈，但它现在不合适。在IE中它看起来还可以，所以它也可能是浏览器的bug。感谢您的帮助，我不再使用html/d3/javascript。没有半径中心？： .innerRadius(innerRadius) var

浏览 4提问于2015-03-23得票数 1

2回答

找不到模块@/资产/<文件名-这里>..svg‘。@vue/cli版本: 4.2.3和4.3.1

vue.js、webpack、import、command-line-interface、assets

/default-profile-picture.svg'.Vetur(2307)我使用的是Vue CLI版本4.2.3，只是尝试使用Vue CLI版本4.3.1，但是遇到了同样的问题。我尝试创建vue.config.js并手动设置资产路径。Component.vue中的误差 <script

浏览 1提问于2020-04-25得票数 3

回答已采纳

1回答