Question

function drawBarChart（）{

var data = {
    labels: ["January", "February", "March", "April", "May", "June", "July"],
    datasets: [
        {
            label: "My First dataset",
            fillColor: "rgba(220,220,220,0.5)",
            strokeColor: "rgba(220,220,220,0.8)",
            highlightFill: "rgba(220,220,220,0.75)",
            highlightStroke: "rgba(220,220,220,1)",
            data: [65, 59, 80, 81, 56, 55, 40]
        },
        {
            label: "My Second dataset",
            fillColor: "rgba(151,187,205,0.5)",
            strokeColor: "rgba(151,187,205,0.8)",
            highlightFill: "rgba(151,187,205,0.75)",
            highlightStroke: "rgba(151,187,205,1)",
            data: [28, 48, 40, 19, 86, 27, 90]
        }
    ]
};




var ctx = document.getElementById("barchart").getContext("2d");
var myBarChart = new Chart(ctx).Bar(data);

}

这是我绘制条形图的功能。我的问题是我尝试了一些方法，我想显示数据集标签＆＃34;我的第一个数据集＆＃34;在我的图表下方。我正在使用chart.js。如果有人设法达到同样的目的，请告诉我。

Answer 1

我假设您希望图表底部显示给定标签的图表图例。您可以尝试将其添加到您的代码中。

<style type = "text/css">

.chart-legend li {
list-style-type: none;
padding-top: 10px;

}

.chart-legend li span { 
display: inline-block;
width: 12px;
height: 12px;
margin-right: 5px;

} 
</style>

 <div id="sample" class="chart-legend">
 </div>

 <script>
 var data = {
 labels: ["January", "February", "March", "April", "May", "June", "July"],
 datasets: [
    {
        label: "My First dataset",
        fillColor: "rgba(220,220,220,0.5)",
        strokeColor: "rgba(220,220,220,0.8)",
        highlightFill: "rgba(220,220,220,0.75)",
        highlightStroke: "rgba(220,220,220,1)",
        data: [65, 59, 80, 81, 56, 55, 40]
    },
    {
        label: "My Second dataset",
        fillColor: "rgba(151,187,205,0.5)",
        strokeColor: "rgba(151,187,205,0.8)",
        highlightFill: "rgba(151,187,205,0.75)",
        highlightStroke: "rgba(151,187,205,1)",
        data: [28, 48, 40, 19, 86, 27, 90]
    }
  ]
};




var ctx = document.getElementById("barchart").getContext("2d");
var myBarChart = new Chart(ctx).Bar(data);
document.getElementById('sample').innerHTML = myBarChart.generateLegend();

}

</script>

如何使用chart.js显示数据集的标签

1 个答案: