Chart.jsに凡例を追加する

2016/06/13 追記
※ こちらは古いバージョン（1.x.x）のChart.js用の記述のようです。新しいバージョンではこちらの記述では動かないおそれがあります。

Chart.jsを利用することで、webサイトに簡単にグラフを表示することができます。
ですが凡例をチャートに追加したい場合は基本の設定に加えて適宜オプションを設定しないと、labelを記述していても出力されません。

chart.jsで凡例を表示する場合のオプション例（折れ線グラフ）

jQuery(function ($) {
        var chartData = {
          labels: ["7月", "8月", "9月"],
          datasets: [
            {
              label: "テスト１",
              strokeColor : "#ff9900",//線の色
              fillColor : "rgba(220, 220, 220, 0)",//線の下側の色（透明にしています）
              pointColor : "rgba(255, 153, 0, 0.8)",//ポイントの色
              pointStrokeColor : "#ff9900",//ポイントの枠の色
              data: [10, 20, 34]
            },
            {
              label: "テスト2",
              strokeColor : "#00a0d2",//線の色
              fillColor : "rgba(220, 220, 220, 0)",//線の下側の色（透明にしています）
              pointColor : "rgba(15, 176, 217, 0.8)",//ポイントの色
              pointStrokeColor : "#00a0d2",//ポイントの枠の色
              data: [5, 4, 10]
            }
          ]
        };

        //オプション
        var barChartOptions = {
          legendTemplate : "<% for (var i=0; i<datasets.length; i++){%><li><span style=\"color:<%=datasets[i].strokeColor%>\">●</span><%if(datasets[i].label){%><%=datasets[i].label%><%}%></li><%}%>"//凡例を出力する場合のオプション。
        };

        var ctx_custom = document.getElementById(chart_name).getContext("2d");

        var chart_set = new Chart(ctx_custom).Line({
          labels: chartData.labels,
          datasets: chartData.datasets
        }, barChartOptions);

        $("#legend").html(chart_set.generateLegend());//凡例を出力する場合のオプション。
});

HTML例

<ul id="legend"></ul><!-- 凡例を出力 -->
<canvas id="chart_name" style="height:220px;width: 100%;"></canvas>

参考： http://www.chartjs.org/docs/
http://jsfiddle.net/vasis1986/8xf5xu2w/