0

我是 Web 开发的新手，正在尝试在我的项目中使用 patternFly 甜甜圈图。但是当我尝试通过运行简单的 HTML 来检查它时，它会抛出以下错误。有人可以帮我解决这个问题吗？

错误图片

<!DOCTYPE html>
<html lang="en">
<head>
    <title>C3</title>
    <meta charset="utf-8" />
    <link href="https://cdnjs.cloudflare.com/ajax/libs/c3/0.4.10/c3.min.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/c3/0.4.10/c3.min.js"></script>
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
	<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/patternfly/3.24.0/css/patternfly.min.css">
  <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/patternfly/3.24.0/css/patternfly-additions.min.css">
</head>
<body>
    <div id="donut-chart-6" class="example-donut-chart-utilization"></div>
    <script>
  var c3ChartDefaults = $().c3ChartDefaults();
  var utilizationDonutChartConfig = c3ChartDefaults.getDefaultDonutConfig('A');
  utilizationDonutChartConfig.bindto = '#donut-chart-6';
  utilizationDonutChartConfig.data = {
    type: "donut",
    columns: [
      ["Used", 60],
      ["Available", 40]
    ],
    groups: [
      ["used", "available"]
    ],
    order: null
  };
  utilizationDonutChartConfig.size = {
    width: 200,
    height: 171
  };

  utilizationDonutChartConfig.tooltip = {
    contents: $().pfGetUtilizationDonutTooltipContentsFn('MHz')
  };
  var utilizationDonutChart = c3.generate(utilizationDonutChartConfig);
  $().pfSetDonutChartTitle("#donut-chart-6", "60", "MHz Used");
</script>
</body>
</html>

4

2 回答 2

1

您的使用$()令人困惑。注释掉使用它的线条会产生一个圆环图。似乎您正在尝试加载默认配置，但我在 c3 网站上没有找到任何信息表明它是一个 jQuery 插件。也许你误解了 jQuery 的作用？如果您尝试将某种默认配置从表单加载为 JSON，那么您可能需要获得更多创意。

为简单起见，在下面的示例中，我将您的数据重新格式化为单个对象。

<!DOCTYPE html>
<html lang="en">
<head>
    <title>C3</title>
    <meta charset="utf-8" />
    <link href="https://cdnjs.cloudflare.com/ajax/libs/c3/0.4.10/c3.min.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/c3/0.4.10/c3.min.js"></script>
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
	<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/patternfly/3.24.0/css/patternfly.min.css">
  <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/patternfly/3.24.0/css/patternfly-additions.min.css">
</head>
<body>
    <div id="donut-chart-6" class="example-donut-chart-utilization"></div>
    <script>
  //var c3ChartDefaults = $().c3ChartDefaults();
  //var utilizationDonutChartConfig = c3ChartDefaults.getDefaultDonutConfig('A');
  utilizationDonutChartConfig = {
    bindto : '#donut-chart-6',
    data : {
      type: "donut",
      columns: [
        ["Used", 60],
        ["Available", 40]
      ],
      groups: [
        ["used", "available"]
      ],
      order: null
    },
    size : {
      width: 200,
      height: 171
    },
   tooltip : {
    //contents: $().pfGetUtilizationDonutTooltipContentsFn('MHz')
    }
  }
  var utilizationDonutChart = c3.generate(utilizationDonutChartConfig);
  //$().pfSetDonutChartTitle("#donut-chart-6", "60", "MHz Used");
</script>
</body>
</html>

于 2017-08-01T12:01:20.583 回答
0 
var c3ChartDefaults =  (<any>$()).c3ChartDefaults();

这对我有用。

于 2017-11-27T10:29:09.720 回答