Chart.js проще и гибче в использовании, чем D3.js, и он очень подходит для реализации некоторых базовых отображений диаграмм.
Chart.js Официальный сайт:www.chartjs.org/
Последняя версия: v2.x
Установить:Обратитесь к официальной документации
Официальная документация представляет собой относительно простое введение в различные примеры диаграмм, и в ней отсутствуют конкретные примеры для некоторых параметров. Здесь в основномLine ChartВозьмите пример для анализа соответствующей конфигурации параметров.
1. Базовый стиль
Здесь ежемесячные результаты тестов учащегося (по английскому языку и математике) подсчитываются и отображаются в виде графика.
код показывает, как показано ниже:
<canvas id="myChart" width="400" height="400"></canvas>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.1/Chart.bundle.min.js"></script>
// x-axis数据 月数
var month = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
// y-axis数据 成绩
var english = [86, 78, 91, 84, 88, 90, 77, 70, 87, 97];
var math = [97, 91, 95, 88, 81, 90, 78, 84, 90, 77];
// 获取canvas作为绘图的上下文
var ctx = document.getElementById('myChart').getContext('2d');
// 生成对应的图表
var myChart = new Chart(ctx, {
type: 'line',
data: {
labels: month,
datasets: [{
label: 'English',
data: english
},
{
label: "Math",
data: math,
}]
}
});
</script>
Приведенный выше код может нарисовать простейшую диаграмму, как показано на следующем рисунке:
dataВ объекте есть три свойства:
-
type: укажите тип диаграммы. -
datasets: указывает набор данных.datasetsКаждый объект представляет собой набор данных, в данном случае соответствующую кривую. -
options: параметры конфигурации. Дополнительная информация, используемая для настройки диаграммы, например заголовок диаграммы, настройки для осей X и Y и т. д.
2. Измените стиль диаграммы
Здесь измените цвет линии по умолчанию, отмените заливку цветом в нижней части строки, добавьте заголовок диаграммы, установите стиль легенды и измените стиль подсказки во всплывающей подсказке.
Для получения подробной информации о настройке параметров см.:Line
код показывает, как показано ниже:
var myChart = new Chart(ctx, {
type: 'line',
data: {
labels: month,
datasets: [{
label: 'English',
data: english,
// 线条颜色
borderColor: "rgba(68,190,190,1)",
// 填充颜色
fill: true,
// 线条下方的填充颜色
backgroundColor: "rgba(68,190,190,.3)"
},
{
label: "Math",
data: math,
borderColor: "rgba(250,150,30,1)",
// 取消填充后，只有图例中会显示相应背景色
backgroundColor: "rgba(250,150,30,.3)",
// 取消填充
fill: false
}]
},
options: {
// 图表标题
title: {
display: true,
text: "月考成绩曲线图"
},
// 图例设置
legend: {
labels: {
padding: 30,
// 使用圆形样式
usePointStyle: true
},
// 显示位置
position: 'bottom'
},
// tooltip提示样式
tooltips: {
enabled: true,
// 同时显示x轴上的数据
// 这里鼠标移到对应点上会同时显示english和math的成绩
mode: 'index',
// 通过回调修改tooltips的标题
callbacks: {
title: function (item) {
return "第" + item[0].xLabel + "月"
}
}
}
}
});
Измененная диаграмма показана ниже:
Измененный эффект отображения всплывающей подсказки показан на следующем рисунке:
Заголовок всплывающей подсказки здесь изменен, и все данные, английский язык и математика положения оси x отображаются одновременно.
Для получения дополнительной информации о настройке всплывающей подсказки см.:Tooltips
В настоящее время значение оси Y начинается непосредственно с 70, а минимальное значение оси Y выбрано в качестве начального значения по умолчанию. Если вы хотите начать с другого значения, вот правильноеoptionsсерединаscalesсвойства изменены.
3. Scales
scalesСоответствующие свойства оси x и оси y могут быть изменены, гдеticksСвойства могут изменить начальное значение соответствующей оси.
код показывает, как показано ниже:
options: {
// 图表标题
title: {
display: true,
text: "月考成绩曲线图"
},
...
scales: {
// x轴
xAxes: [{
// 背景网格
gridLines: {
// 取消x轴的竖线
display: false,
// 设置x轴线颜色
color: "black",
},
// x轴标题
scaleLabel: {
display: true,
labelString: "考试月数",
},
}],
// y轴
yAxes: [{
gridLines: {
color: "black",
// 以点线显示
borderDash: [2, 5],
},
scaleLabel: {
display: true,
labelString: "分数",
},
// 设置起止数据和步长
ticks: {
min: 60,
max: 100,
stepSize: 5
}
}]
}
}
Измененная диаграмма показана ниже: