<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="http://code.jquery.com/ui/1.11.1/jquery-ui.min.js"></script>
<!-- Ignite UI Required Combined CSS Files -->
<link href="http://cdn-na.infragistics.com/igniteui/2022.1/latest/css/themes/infragistics/infragistics.theme.css" rel="stylesheet" />
<link href="http://cdn-na.infragistics.com/igniteui/2022.1/latest/css/structure/infragistics.css" rel="stylesheet" />
<!--CSS file specific for chart styling -->
<link href="http://cdn-na.infragistics.com/igniteui/2022.1/latest/css/structure/modules/infragistics.ui.chart.css" rel="stylesheet" />
<!-- Ignite UI Required Combined JavaScript Files -->
<script src="http://cdn-na.infragistics.com/igniteui/2022.1/latest/js/infragistics.core.js"></script>
<script src="http://cdn-na.infragistics.com/igniteui/2022.1/latest/js/infragistics.dv.js"></script>
<div id="chart"></div>
<div id="legend"></div>
// データ
var prefData = [
{ "prefecture": "滋賀県", "score2017": 70, "score2018": 90 },
{ "prefecture": "京都府", "score2017": 125, "score2018": 150 },
{ "prefecture": "大阪府", "score2017": 110, "score2018": 75 },
{ "prefecture": "奈良県", "score2017": 140, "score2018": 150 }
];
// igDataChart
$("#chart").igDataChart({
width: "600px",
height: "350px",
dataSource: prefData,//データの指定
title: "調査結果",
legend: { element: "legend" }, // 凡例
axes: [
// X軸、横軸
{
name: "prefectureAxis",
type: "categoryX",
label: "prefecture",
title: "府県"
},
// Y軸、縦軸
{
name: "scoreAxis",
type: "numericY",
minimumValue: 0,
maximumValue: 180,
title: "スコア"
}
],
series: [
{
name: "score2017",
type: "line",
xAxis: "prefectureAxis",
yAxis: "scoreAxis",
valueMemberPath: "score2017",
title: "score2017",
thickness: 5
},
{
name: "score2018",
type: "line",
xAxis: "prefectureAxis",
yAxis: "scoreAxis",
valueMemberPath: "score2018",
title: "score2018"
}
],
seriesMouseLeftButtonDown: function (evt, ui) {
var newThickness = ui.series.thickness === 5 ? 2 : 5;
$('#' + evt.target.id).igDataChart("option", "series",
[{
name: ui.series.name,
thickness: newThickness,
}]
);
}
});
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.