Question

$("#sparepartconsumption svg").attr("width", '800px');
$("#sparepartconsumption svg").attr("height", '500px');
console.log(datax)
console.log(datay)
var bar = new RGraph.SVG.HBar({
  id: 'sparepartconsumption',
  data: datax,
  options: {
    yaxisLabels: datay,
    xaxis: false,
    yaxis: false,
    colorsSequential: true,
    backgroundGridVlines: false,
    title: 'Consumption',
    titleColor: 'black',
    titleSize: 14,
    titleX: 240,
    titleY: 15,
    shadow: false,
    strokestyle: 'rgba(0,0,0,0)',
    textFont: 'Roboto-Black',
    textSize: 7,
    colors: ['#FFDE00', '#097054'],
    labelsAbove: true,
    // keyColors:  [ '#FFDE00', '#097054'],
    // key: legend,
    // keyPosition: 'graph',
    textAccessible: true,
  }
}).grow({
  frames: 60
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div style="width: 90%; height: 500px; float:left" id="sparepartconsumption">

</div>

样本数据：

["NS0000004","NS0000004","NS0000004","NS0000004","NS0000004","NS0000004","NS0000004","NS0000004","NS0000004"]

["5.000","5.000","5.000","5.000","5.000","10.000","10.000","40.000","50.000"]

我正在使用rgraph生成图形。数据都是好的问题，SVG的宽度和高度为0。尝试使用jQuery设置宽度和高度，但没有帮助。

为什么我的SVG的宽度和高度为0？
如何解决此问题？

Answer 1

您在代码中未定义svg元素。浏览器返回0，因为您要求输入不存在的元素的width和height。
只需在<svg></svg>内添加div。

评论后编辑

我回答了你的问题。如果您想问一下如何用Rgraph放置svg元素并编辑其大小，则应该提出。

首先，回答N。1几乎成立。您尝试设置尚不存在的width元素的height和svg。稍后将使用new RGraph.SVG.HBar语句创建它。因此，您的javascript的前两行什么都不做。

第二，导致此结果的最可能原因是svg元素未正确创建。代码有几个问题。我做了一个工作示例来说明它们：

<!DOCTYPE html >
<html lang="en">
<head>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

    <script src="../libraries/RGraph.svg.common.core.js" ></script>

    <script src="../libraries/RGraph.svg.hbar.js" ></script>


    <title>RGraph demo</title>


    <meta name="description" content="An SVG HBar Chart " />
    <meta name="robots" content="noindex, nofollow" />

<script>

var datay = ["NS0000004","NS0000004","NS0000004","NS0000004","NS0000004","NS0000004","NS0000004","NS0000004","NS0000004"];

var datax = [5.000,5.000,5.000,5.000,5.000,10.000,10.000,40.000,50.000];

$(document).ready(function(){
var bar = new RGraph.SVG.HBar({
  id: 'sparepartconsumption',
  data: datax,
  options: {
    yaxisLabels: datay,
    xaxis: false,
    yaxis: false,
    colorsSequential: true,
    backgroundGridVlines: false,
    title: 'Consumption',
    titleColor: 'black',
    titleSize: 14,
    titleX: 240,
    titleY: 15,
    shadow: false,
    strokestyle: 'rgba(0,0,0,0)',
    textFont: 'Roboto-Black',
    textSize: 7,
    colors: ['#FFDE00', '#097054'],
    labelsAbove: true,
    // keyColors:  [ '#FFDE00', '#097054'],
    // key: legend,
    // keyPosition: 'graph',
    textAccessible: true,
  }
}).grow({
  frames: 60
});
$("#sparepartconsumption svg").attr("width", '800px');
$("#sparepartconsumption svg").attr("height", '500px');
console.log(datax)
console.log(datay)
});
</script>

</head>
<body>
<div style="width: 90%; height: 500px; float:left" id="sparepartconsumption">

</div>

</body>

注意事项：

您的datax数组包含字符串，它应该包含数字（不带双引号）。
如果使用jquery，则需要确保在使用时包含的div元素存在。这就是Rgraph元素被包裹在$（document）.ready（function（）{}）块内的原因。
如您所见，更改svg元素大小的代码位于结尾。不必要，因为Rgraph会根据父元素设置大小。
如果尝试这段代码，请确保脚本元素的src指向正确的路径。在我的系统中，它是../libraries/RGraph.svg.common.core.js和../libraries/RGraph.svg.hbar.js，但是是YMMV。

Answer 2

前段时间我遇到了同样的问题-这是由于我在SVG标签上未使用正确的命名空间。

在RGraph中创建SVG标签的代码是这样的：

    var svg = doc.createElementNS("http://www.w3.org/2000/svg", "svg");
        svg.setAttribute('style', 'top: 0; left: 0; position: absolute');
        svg.setAttribute('width', container.offsetWidth);
        svg.setAttribute('height', container.offsetHeight);
        svg.setAttribute('version', '1.1');
        svg.setAttributeNS("http://www.w3.org/2000/xmlns/", 'xmlns', 'http://www.w3.org/2000/svg');
        svg.setAttributeNS("http://www.w3.org/2000/xmlns/", "xmlns:xlink", "http://www.w3.org/1999/xlink");
        svg.__object__    = obj;
        svg.__container__ = container;
    container.appendChild(svg);

（如果您仅使用它，将无法正常工作-需要针对您的环境进行修改）。

如果仅传递DIV标记的ID，则RGraph将在其中创建一个SVG-或者如果您真的想自己创建它，则查看RGraph.SVG.createSVG（）函数-您应该能够如果确实需要，可以将其复制到自己的代码库中（当然，您需要对其进行修改）。

rgraph SVG的宽度和高度为0

2 个答案: