Question

我对图表js有一个小问题

我想画一个饼图，但是当我引用它时页面仍然是空的

我的代码如下，我对脚本标记的在线src有疑问：

＆＃13;

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

＆＃13;

提前谢谢

Answer 1

尝试使用文档中显示的此结构创建图表。

根据文档看起来您的结构有点偏差。 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}

Answer 2

我认为您的数据结构使用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,
});

我的饼图（chartJs）没有出现

2 个答案: