又快又好！巧用ChartJS打造你的實用折線圖

又快又好！巧用ChartJS打造你的實用折線圖

最終效果

本示例利用官方示例改造而成，生成帶圖示的折線圖，標出各折線的名稱，能夠篩選想要顯示的折線。

要實現最終效果，咱們要分三步走：

1. 生成折線圖；

2. 生成自定義提示；

3. 生成圖示（折線顯示控制板）

生成折線圖

首先，咱們要設置折線圖的位置。

<div style="width:50%">
    <div id="line-legend">
    </div>
    <div>
        <canvas id="line-chart" height="450px" width="800px"></canvas>
    </div>
</div>

咱們將圖表放置於id爲line-chart的canvas中，而圖例則在id爲line-legend的div中。

接着，咱們要生成折線圖。

設置x軸數據

var x_labels = ["January","February","March","April","May","June","July"];

設置y軸數據

var default_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 : [randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor()]
        },
        {
            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 : [randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor()]
        }
    ];

將x軸和y軸的數據打包成數據包：

var lineChartData = {
    labels : x_labels,
    datasets : default_datasets
 };

設置顯示的效果(這裏是直接從官網示例裏copy過來的:-)

var lineChartOptions = {
    //Boolean - If we should show the scale at all
    showScale: true,
    ...
    //Boolean - whether to make the chart responsive to window resizing
    responsive: true,
};

生成折線圖

var lineChartCanvas = chart.get(0).getContext("2d");
var lineChart = new Chart(lineChartCanvas);
var line_chart_handle = lineChart.Line(lineChartData, lineChartOptions);

本階段效果

以上示例可參考官方教程。

自定義提示

剛纔咱們成功地繪製了一張圖表，可是基本圖表中的提示只顯示了折線的顏色和值，咱們還但願能把折線的名稱也加上，那到底該怎麼作呢？

很簡單，這個功能屬於圖表的要顯示的效果，還記得剛纔咱們設置的lineChartOptions嗎，它就是設定顯示效果的參數。只要在其中設定一項新的參數multiTooltipTemplate便可，該參數用於自定義數據提示tooltip。

multiTooltipTemplate: "<%if (datasetLabel){%><%=datasetLabel%>: <%}%><%= value %>"

上面的代碼是什麼意思呢？大體能夠看出，是給multiTooltipTemplate賦了一個值，而這個值就是咱們想要顯示的數據的樣式。你大概猜到了，datasetLabel其實就是折線標題的變量。

該功能雖然簡單，但基本上出圖表都會用到，因此在此專門用一節來講明。

生成圖示

終於到達咱們的重頭戲，如今要來實現圖示功能了。

咱們再將這個大目標劃分爲兩個具體的小目標：
首先，咱們先將圖示展現出來；
接着，點擊圖示以後，動態顯示或隱藏指定的折線。

添加展現圖示

咱們以前已經設置好了圖例所在，如今填入兩個checkbox。

<div id="line-legend">
  <ul class="line-legend">
    <li class="checkbox-five">
      <input type="checkbox" name="line-legend" value="0" checked="checked">
      <label for="line-legend" style="background-color:rgba(220, 220, 220, 1);">
      </label>
      <span>My First dataset</span>
    </li>
    <li class="checkbox-five">
      <input type="checkbox" name="line-legend" value="1" checked="checked">
      <label for="line-legend" style="background-color:rgba(151, 187, 205, 1);">
      </label>
      <span>My Second dataset</span>
    </li>
  </ul>
</div>

添加曲線選項事件響應

爲兩條折線添加了checkbox，但點擊了它折線也沒有變化。不要緊，咱們如今來爲折線添加上事件響應，使得圖表能自由顯示或是隱藏折線。

// 給圖例中的選框增長事件響應
// 被選中的則顯示其對應折線，未選中的不顯示
$('[name = \'line-legend\']:checkbox').each(function(key, value) {
    // 設置全部的checkbox爲選中
    $(this).attr('checked', true);
    // 設置checkbox被取消選擇以後，將該曲線消除
    $(this).click(function() {
        // 顯示相應的折線
    } else {
        // 刪除被選中折線上的點
    }
});

如今咱們爲checkbox添加上了事件響應，具體的響應事件將在下一節說明。

ChartJS數據結構

要想知道如何讓折線從圖表中顯示出來，或是消息，首先要來了解曲線的數據結構。
ChartJS裏的點是由數據包構成的，而一個數據包分紅兩部分：一塊包含點的信息，一塊用於顯示該點。

瞭解了ChartJS上折線圖的數據結構，你們也就明白了：顯示一條折線，便是添加points；隱藏一條折線，便是將其points去除。

因此，當某一條曲線被選中時，咱們就根據該曲線的信息生成新的點；

if ($(this).is(':checked')) {
    // 插入被選中折線上的點
    $.each(y_datasets[index].data, function(key, value) {
      line_chart_handle.datasets[index].points.push(new line_chart_handle.PointClass({
        value : value,
        label : lineChartData.labels[key],
        datasetLabel : lineChartData.datasets[index].label,
        x: line_chart_handle.scale.calculateX(line_chart_handle.scale.valuesCount + 1),
        y: line_chart_handle.scale.endPoint,
        strokeColor : line_chart_handle.datasets[index].pointStrokeColor,
        fillColor : line_chart_handle.datasets[index].pointColor
      }));
    });
}

當一條曲線被取消選中時，咱們只須要將這條曲線上的點到清空便可。

else {
    // 刪除被選中折線上的點
    for (var i = line_chart_handle.datasets[index].points.length - 1; i >= 0; i--) {
      line_chart_handle.datasets[index].points.shift();
    }
}

大功告成！

示例下載

下載地址：百度雲（http://pan.baidu.com/s/1c00oYJm）

注：若是連接失效了，私信我吧~（但願你不要覺得我有別的企圖）