gpt4 book ai didi

javascript - 使用圆环图时出现的问题

转载 作者:行者123 更新时间:2023-12-03 03:45:03 24 4
gpt4 key购买 nike

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

Error image

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

最佳答案

您对 $() 的使用令人困惑。注释掉使用它的行会产生一个圆环图。看起来你正在尝试加载默认配置,但我在 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>

关于javascript - 使用圆环图时出现的问题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/45436777/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com