我的饼图（chartJs）没有出现答案

【问题标题】：My pie chart (chartJs) does not appear我的饼图（chartJs）没有出现
【发布时间】：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" width="400" height="400"></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>

提前谢谢你

【问题讨论】：

标签： javascript charts chart.js

【解决方案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}