Javascript chart.js图例不适用于饼图_Javascript_Jquery_Html_Data Visualization_Chart.js

Javascript chart.js图例不适用于饼图

javascript jquery html chart.js

Javascript chart.js图例不适用于饼图,javascript,jquery,html,data-visualization,chart.js,Javascript,Jquery,Html,Data Visualization,Chart.js,我正在写一个小申请。我正在使用chart.js绘制piecharts。我能够成功地绘制piechart。但不知何故，传说是行不通的。我能知道我哪里出错了吗？我的代码如下所示：代码： <body onload = onLoading()> <div class="container"> <div class="col-xs-12"> <div class="page-header"> <h3>Test</

我正在写一个小申请。我正在使用chart.js绘制piecharts。我能够成功地绘制piechart。但不知何故，传说是行不通的。我能知道我哪里出错了吗？我的代码如下所示：

代码：

<body onload = onLoading()>
<div class="container">
<div class="col-xs-12">

    <div class="page-header">
        <h3>Test</h3>       
    </div>

    <div class="carousel slide" id="myCarousel">
        <nav>
            <ul class="control-box pager">
                <li><a data-slide="prev" href="#myCarousel" class=""><i class="glyphicon glyphicon-chevron-left"></i></a></li>
                <li><a data-slide="next" href="#myCarousel" class=""><i class="glyphicon glyphicon-chevron-right"></i></li>
            </ul>
        </nav>
       <!-- /.control-box -->
        <div class="carousel-inner">
            <div class="item active">

                        <div class="col-sm-6">
                            <div class="fff">
                                <div class="thumbnail" id="tmp">
                                   <h3>A</h3><canvas id="i1"></canvas>
                                </div>

                            </div>
                        </div>
                        <div class="col-sm-6">
                            <div class="fff">
                                <div class="thumbnail">
                                    <h3>B</h3><canvas id="i2"></canvas>
                                </div>

                            </div>
                        </div>
                        <div class="col-sm-6">
                            <div class="fff">
                                <div class="thumbnail">
                                     <h3>C</h3><canvas id="i3"></canvas>
                                </div>

                            </div>
                        </div>
                        <div class="col-sm-6">
                            <div class="fff">
                                <div class="thumbnail">
                                    <h3>D</h3><canvas id="i4"></canvas>
                                </div>

                            </div>
                        </div>

              </div><!-- /Slide1 --> 

        </div>




    </div><!-- /#myCarousel -->

</div><!-- /.col-xs-12 -->          

</div><!-- /.container -->


<script type="text/javascript">
// Carousel Auto-Cycle
  $(document).ready(function() {
    $('.carousel').carousel({
      interval: 6000
    })
  });

  function onLoading()

{          

var pieData = [
   {
      value: 25,
      label: 'Java',
      color: "#F38630"
   },
   {
      value: 10,
      label: 'Scala',
      color: "#F34353",
   },
   {
      value: 30,
      label: 'PHP',
      color: '#B276B2 '
   },
   {
      value : 35,
      label: 'HTML',
      color: '#5DA5DA'
   }
];
var context = document.getElementById('i1').getContext('2d');
var skillsChart = new Chart(context).Pie(pieData);
document.getElementById('i1').innerHTML = skillsChart.generateLegend();

context = document.getElementById('i2').getContext('2d');
skillsChart = new Chart(context).Pie(pieData);
document.getElementById('i2').innerHTML = skillsChart.generateLegend();

context = document.getElementById('i3').getContext('2d');
skillsChart = new Chart(context).Pie(pieData);
document.getElementById('i3').innerHTML = skillsChart.generateLegend();

context = document.getElementById('i4').getContext('2d');
skillsChart = new Chart(context).Pie(pieData);
document.getElementById('i4').innerHTML = skillsChart.generateLegend();
}

</script>
</body>


试验




A.
B
C
D
//旋转木马自动循环
$（文档）.ready（函数（）{
$（'.carousel'）。carousel({
间隔时间：6000
})
});
函数onload（）
{          
变量数据=[
{
价值：25，
标签：“Java”，
颜色：“F38630”
},
{
数值：10，
标签：“Scala”，
颜色：“F34353”，
},
{
数值：30，
标签：“PHP”，
颜色：“#B276B2”
},
{
价值：35，
标签：“HTML”，
颜色：“#5DA5DA”
}
];
var context=document.getElementById（'i1'）.getContext（'2d'）；
var skillsChart=新图表（上下文）.Pie（数据）；
document.getElementById（'i1'）。innerHTML=skillsChart.generateLegend（）；
context=document.getElementById（'i2'）.getContext（'2d'）；
skillsChart=新图表（上下文）.Pie（pieData）；
document.getElementById（'i2'）.innerHTML=skillsChart.generateLegend（）；
context=document.getElementById（'i3'）.getContext（'2d'）；
skillsChart=新图表（上下文）.Pie（pieData）；
document.getElementById（'i3'）.innerHTML=skillsChart.generateLegend（）；
context=document.getElementById（'i4'）.getContext（'2d'）；
skillsChart=新图表（上下文）.Pie（pieData）；
document.getElementById（'i4'）。innerHTML=skillsChart.generateLegend（）；
}

图例必须添加到与画布元素分离的元素中。所以你需要的是

...
<h3>A</h3><canvas id="i1"></canvas>
<div id="i1-legend"></div>
...

此外，您可能需要CSS来正确设置样式，就像这样

ul.pie-legend {
    list-style: none;
}
ul.pie-legend span {
    display: inline-block;
    width: 10px;
    height: 10px;
    margin-right: 10px;
}

图例必须添加到与画布元素分开的元素中。所以你需要的是

...
<h3>A</h3><canvas id="i1"></canvas>
<div id="i1-legend"></div>
...

此外，您可能需要CSS来正确设置样式，就像这样

ul.pie-legend {
    list-style: none;
}
ul.pie-legend span {
    display: inline-block;
    width: 10px;
    height: 10px;
    margin-right: 10px;
}