又快又好！巧用ChartJS打造你的實用折線圖
最終效果
本示例利用官方示例改造而成，生成帶圖示的折線圖，标出各折線的名稱，可以篩選想要顯示的折線。
要實作最終效果，我們要分三步走：
生成折線圖；
生成自定義提示；
生成圖示(折線顯示控制闆)
生成折線圖
首先，我們要設定折線圖的位置。
我們将圖表放置于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: ": "
上面的代碼是什麼意思呢？大緻可以看出，是給multiTooltipTemplate賦了一個值，而這個值就是我們想要顯示的資料的樣式。你大概猜到了，datasetLabel其實就是折線标題的變量。
該功能雖然簡單，但基本上出圖表都會用到，是以在此專門用一節來說明。
生成圖示
終于到達我們的重頭戲，現在要來實作圖示功能了。
我們再将這個大目标劃分為兩個具體的小目标：
首先，我們先将圖示展示出來；
接着，點選圖示之後，動态顯示或隐藏指定的折線。
添加展示圖示
我們之前已經設定好了圖例所在，現在填入兩個checkbox。
- My First dataset
- My Second dataset
添加曲線選項事件響應
為兩條折線添加了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();
}
}
大功告成！
示例下載下傳
注：如果連結失效了，私信我吧~(希望你不要以為我有别的企圖)