Question

我正在尝试使用graph.js创建一个直线和饼图，线图显示但饼图不显示。我的HTML有什么问题吗？这两个数据变量分别来自graph.js（线图，它是第一个变量）和piegraph.js，它是第二个数据变量。

    <script src="Chart.min.js"></script>
    <script src="graph.js"></script> 
    <script src="piegraph.js"></script>
    </head>
<body>

    <canvas id="myChart" width="300" height="300"></canvas>
    <script>
        var ctx = document.getElementById("myChart").getContext("2d");
        var myNewChart = new Chart(ctx).Line(data,options);

    </script>
<canvas id="myPie" width="300" height= "300"></canvas>
<script>
    var ctx = document.getElementById("myPie").getContext("2d");
    var myPie = new Chart(ctx[0]).Pie(data,options);

var data = {
labels: ["January", "February", "March", "April", "May", "June", "July"],
datasets: [
    {
        label: "My First dataset",
        fillColor: "rgba(220,220,220,0.2)",
        strokeColor: "rgba(220,220,220,1)",
        pointColor: "rgba(220,220,220,1)",
        pointStrokeColor: "#fff",
        pointHighlightFill: "#fff",
        pointHighlightStroke: "rgba(220,220,220,1)",
        data: [65, 59, 80, 81, 56, 55, 40]
    },
    {
        label: "My Second dataset",
        fillColor: "rgba(151,187,205,0.2)",
        strokeColor: "rgba(151,187,205,1)",
        pointColor: "rgba(151,187,205,1)",
        pointStrokeColor: "#fff",
        pointHighlightFill: "#fff",
        pointHighlightStroke: "rgba(151,187,205,1)",
        data: [28, 48, 40, 19, 86, 27, 90]
    }
]
};
var data = [
    {
    value: 300,
    color:"#F7464A",
    highlight: "#FF5A5E",
    label: "Red"
},
{
    value: 50,
    color: "#46BFBD",
    highlight: "#5AD3D1",
    label: "Green"
},
{
    value: 100,
    color: "#FDB45C",
    highlight: "#FFC870",
    label: "Yellow"
}
  ]
    </script>

Answer 1

你首先使用ctx [0]作为饼图，它的变量是ctx，你做错了两件事。

其次你用相同的值覆盖数据变量，所以在这里我改变了你的代码。

HTML

<canvas id="myChart" width="300" height="300"></canvas>
<canvas id="myPie" width="300" height= "300"></canvas>

Javascript代码

//Data for Bar Graph
var data = {
labels: ["January", "February", "March", "April", "May", "June", "July"],
datasets: [
    {
        label: "My First dataset",
        fillColor: "rgba(220,220,220,0.2)",
        strokeColor: "rgba(220,220,220,1)",
        pointColor: "rgba(220,220,220,1)",
        pointStrokeColor: "#fff",
        pointHighlightFill: "#fff",
        pointHighlightStroke: "rgba(220,220,220,1)",
        data: [65, 59, 80, 81, 56, 55, 40]
    },
    {
        label: "My Second dataset",
        fillColor: "rgba(151,187,205,0.2)",
        strokeColor: "rgba(151,187,205,1)",
        pointColor: "rgba(151,187,205,1)",
        pointStrokeColor: "#fff",
        pointHighlightFill: "#fff",
        pointHighlightStroke: "rgba(151,187,205,1)",
        data: [28, 48, 40, 19, 86, 27, 90]
    }
]
};
// Drawing Bar Chart From Your Above data
var ctx = document.getElementById("myChart").getContext("2d");
var myNewChart = new Chart(ctx).Line(data);

//Data for Pie Chart.
var data2 = [
    {
    value: 300,
    color:"#F7464A",
    highlight: "#FF5A5E",
    label: "Red"
},
{
    value: 50,
    color: "#46BFBD",
    highlight: "#5AD3D1",
    label: "Green"
},
{
    value: 100,
    color: "#FDB45C",
    highlight: "#FFC870",
    label: "Yellow"
}
];
var ctx2 = document.getElementById("myPie").getContext("2d");
var myPie = new Chart(ctx2).Pie(data2);

请参阅此代码live at Here

将Chart.js用于应用程序

1 个答案: