使用 c3 可视化图表
Visualizing a chart using c3
我正在尝试重现一些代码来生成 chart using c3。这个脚本虽然不渲染任何东西。为什么? (href中列出的文件在同一个文件夹中)
<!DOCTYPE html>
<html>
<head>
<!-- Load c3.css -->
<link href="c3.css" rel="stylesheet" type="text/css">
<!-- Load d3.js and c3.js -->
<script src="d3.v3.min.js" charset="utf-8"></script>
<script src="c3.min.js"></script>
<meta charset="UTF-8">
<title>title </title>
</head>
<body>
<div id="chart"></div>
<script>
var chart = c3.generate({
bindto: '#chart',
data: {
columns: [
['data1', 30, 200, 100, 400, 150, 250],
['data2', 50, 20, 10, 40, 15, 25]
]
}
});
</script>
</body>
这是一个工作示例,因此如果未加载图表,可能是您没有正确引用库 C3 和 D3。
如果缺少库,请检查浏览器的 Web 控制台(在 Chrome here 中使用)。
检查此步骤:
- 对于 C3 安装,请遵循指南:http://c3js.org/gettingstarted.html
- 对于 D3,您可以使用源远程连接:http://d3js.org/d3.v3.min.js
对于关注此主题的其他人,我建议您可以使用以下内容分发网络 (CDN) 资源来加载您的 D3.js 和 C3.js 库:
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/c3/0.4.10/c3.min.css">
<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/c3/0.4.10/c3.min.js"></script>
我将这些资源编码到我文档的 <head>
部分时没有问题地加载了您的图表。
我正在尝试重现一些代码来生成 chart using c3。这个脚本虽然不渲染任何东西。为什么? (href中列出的文件在同一个文件夹中)
<!DOCTYPE html>
<html>
<head>
<!-- Load c3.css -->
<link href="c3.css" rel="stylesheet" type="text/css">
<!-- Load d3.js and c3.js -->
<script src="d3.v3.min.js" charset="utf-8"></script>
<script src="c3.min.js"></script>
<meta charset="UTF-8">
<title>title </title>
</head>
<body>
<div id="chart"></div>
<script>
var chart = c3.generate({
bindto: '#chart',
data: {
columns: [
['data1', 30, 200, 100, 400, 150, 250],
['data2', 50, 20, 10, 40, 15, 25]
]
}
});
</script>
</body>
这是一个工作示例,因此如果未加载图表,可能是您没有正确引用库 C3 和 D3。
如果缺少库,请检查浏览器的 Web 控制台(在 Chrome here 中使用)。
检查此步骤:
- 对于 C3 安装,请遵循指南:http://c3js.org/gettingstarted.html
- 对于 D3,您可以使用源远程连接:http://d3js.org/d3.v3.min.js
对于关注此主题的其他人,我建议您可以使用以下内容分发网络 (CDN) 资源来加载您的 D3.js 和 C3.js 库:
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/c3/0.4.10/c3.min.css">
<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/c3/0.4.10/c3.min.js"></script>
我将这些资源编码到我文档的 <head>
部分时没有问题地加载了您的图表。