Question

我是网络开发的新手，我正在尝试将patternFly Donut图表用于我的项目。但是当我尝试通过运行简单的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>

Answer 1

您对$()的使用令人困惑。评论使用它的线会产生圆环图。您似乎正在尝试加载默认配置，但我没有在c3网站上找到任何信息，表明它是一个jQuery插件。也许你误解了jQuery的作用？如果您尝试从表单中加载某种默认配置作为JSON，那么就might need to get more creative。

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

＆＃13;

<!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>

＆＃13;

Answer 2

var c3ChartDefaults =  (<any>$()).c3ChartDefaults();

这对我有用。

使用圆环图时的问题

2 个答案: