我的饼图（chartJs）没有出现
Posted
技术标签:
【中文标题】我的饼图（chartJs）没有出现【英文标题】：My pie chart (chartJs) does not appear 【发布时间】：2017-01-07 22:39:04 【问题描述】：我对图表 js 有一个小问题
我想画一个饼图，但是当我引用它时页面仍然是空的
我的代码如下，我对script标签的在线src有疑问：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>C.H.A.R.T.JS</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.2.2/Chart.min.js"></script>
</head>
<body>
<canvas id="myChart" ></canvas>
<script>
$(function()
//$('body').css('background':'red');
var ctx = $("#myChart").get(0).getContext("2d");
var data = [
value :270,
color :'Dodgerblue',
heightLight: 'Lightskyblue',
label :'Imed1'
,
value :50,
color :'Red',
heightLight: 'Lightskyblue',
label :'Imed2'
,
value :40,
color :'yellow',
heightLight: 'Lightskyblue',
label :'Imed3'
];
var pieChart = new Chart(ctx).Pie(data);
); // fin jQuery
</script>
</body>
</html>提前谢谢你
【问题讨论】：
【参考方案1】：我认为你的数据结构是使用chartJS1，但你的CDN是chartJS2。 这就是为什么您只收到错误消息的原因。
var ctx = $("#myChart").get(0).getContext("2d");
var data =
labels: [
"Red",
"Blue",
"Yellow"
],
datasets: [
data: [300, 50, 100],
backgroundColor: [
"#FF6384",
"#4BC0C0",
"#FFCE56"
],
label: 'My dataset'
]
;
var myPieChart = new Chart(ctx,
type: 'pie',
data: data,
);
【讨论】：
但是我怎样才能让它变小呢？它太大了...... CSS？ @user5080818 您可以使用options: responsive: false 控制它是否响应。你可以像这样data: data, options: responsive: false 传递它。默认情况下它是响应式的，填充它的父容器。您可以设置具有最大宽度或预定义宽度/高度的父容器。或者你可以做类似#myChart max-width: 400px; 的事情。使用 max-width 如果父容器变小，它将保持响应。【参考方案2】：
尝试使用文档中显示的这种结构创建图表。
根据文档，您的结构看起来有点偏离。 http://www.chartjs.org/docs/#doughnut-pie-chart
var ctx = document.getElementById("myChart").getContext("2d");
// For a pie chart
var myPieChart = new Chart(ctx,
type: 'pie',
data: data,
options: options
);`
var data =
labels: [
"Red",
"Blue",
"Yellow"
],
datasets: [
data: [300, 50, 100],
backgroundColor: [
"#FF6384",
"#36A2EB",
"#FFCE56"
],
hoverBackgroundColor: [
"#FF6384",
"#36A2EB",
"#FFCE56"
]
]
;
默认情况下它是响应式的，会扩展到它的父容器。您可以设置父容器最大宽度或画布本身，这将使其对较小的屏幕保持响应。
<style type="text/css">
#myChart
max-width: 400;
</style>
或者，如果您根本不希望它响应，您可以将该选项设置为 false。
options: responsive: false
【讨论】：
感谢您的回答，我会按照您的链接...谢谢 再次感谢...对于 css，我必须将 px 添加到 400 才能使其正常工作，但我更喜欢这个：选项：responsive: false以上是关于我的饼图（chartJs）没有出现的主要内容，如果未能解决你的问题，请参考以下文章