使用圆环图时出现的问题
使用圆环图时出现的问题
提问于 2017-08-01 19:38:44
我是网络开发的新手，正在尝试使用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>
回答 2
Stack Overflow用户
发布于 2017-08-01 20:01:21
您对$()的使用令人困惑。注释掉使用它的行将生成一个环形图。看起来您正在尝试加载默认配置，但我在c3网站上没有找到任何信息表明这是一个jQuery插件。也许你误解了jQuery是做什么的？如果您试图以JSON的形式从表单加载某种默认配置，那么您可以使用might need to get more creative。
为简单起见，在下面的示例中，我将您的数据重新格式化为单个对象。
<!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>
Stack Overflow用户
发布于 2017-11-27 18:29:10
var c3ChartDefaults = (<any>$()).c3ChartDefaults();这对我很有效。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/45436777
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号