Question

我正在写一个小应用程序。我正在使用chart.js绘制饼图。我能够成功绘制饼图。但不知何故传奇无效。我可以知道我哪里出错吗？我的代码如下所示：

代码：

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

Answer 1

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

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

脚本

document.getElementById('i1-legend').innerHTML = skillsChart.generateLegend();

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

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

chart.js图例不适用于饼图

1 个答案: