chart.js로 버블 차트를 슬라이더(슬라이드 바?)로 글리그리 움직이는 후편
11898 단어 슬라이더chart.js버블 차트슬라이더BubbleChart
목표로 하는 모습(후편)
아래와 같이, chart.js의 버블 차트를 슬라이더로 그리그리 움직일 뿐만 아니라, 「스타트/스톱」버튼에 의해 그 슬라이더를 자동 재생시킨다. (& 루프)
슬라이더를 작성하는 곳까지는 전회의 기사에 기재했으므로, 좋으면 그쪽도 봐 주세요!
htps : // m / supingansen / ms / e f4bf 194b1에서 f0cf03
설명
1단계
HTML에 '시작/정지' 버튼을 설치한다.
<input type="button" value="スタート/ストップ" onclick="button_fnc()">
상기에 의해, 버튼을 누르면 javaScript측의 button_fnc()가 불리게 된다. (스텝 3에서 정의합니다)
2단계
슬라이더를 하나 옆으로 움직이는 함수를 정의한다. 슬라이더가 오른쪽 끝까지 오면 왼쪽 끝으로 돌아가도록 if, else로 조건 분기하고 있다.
document.getElementById("slider_position").value에 슬라이더의 위치 정보가 들어 있으므로, 거기에 +1 하면 된다. 다만 문자열로 격납되어 있으므로, parseInt 하지 않으면 「0,1,11,100,,,」라고 늘어나 버린다. parseInt 하면 「0,1,2,,,」라고 늘어나 준다.
여기에 나오는 bubble_chart_move ()는 마지막으로 작성된 함수입니다.
// スライダーを一つ横に動かす。バーが右端まで来たら左端に戻る
var auto = function () {
// 今回はスライダーの範囲を0~4と設定している
if (document.getElementById("slider_position").value < 4) {
// valueはSting型で保持されているので、プラス1する前にparseIntする
document.getElementById("slider_position").value = parseInt(document.getElementById("slider_position").value) + 1;
bubble_chart_move();
}
else {
document.getElementById("slider_position").value = 0;
bubble_chart_move();
}
}
3단계
스텝 1에서 등장한 button_fnc()의 처리를 작성한다.
또한 하나의 버튼으로 "시작"과 "정지"를 전환 할 수 있도록 button_flag로 제어합니다.
auto_func = setInterval("auto()",1000); 멈출 때는 "clearTimeout(auto_func);"를 사용한다.
// スタート/ストップボタンが押された時の処理
var auto_func;
var button_flag = 0; // 初期状態を0としておく
function button_fnc() {
// ボタンが押された時、button_flag = 0なら自動再生スタート
if (button_flag == 0) {
auto_func = setInterval("auto()",1000);
button_flag = 1;
}
// ボタンが押された時、button_flag = 1なら自動再生ストップ
else {
clearTimeout(auto_func);
button_flag = 0;
}
}
이상으로 완성입니다!
최종형의 코드
아래 코드를 그대로 복사하여 브라우저에서 표시하면 실제로 시도 할 수 있습니다.
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>グラフ</title>
</head>
<body>
<h1>バブルチャート</h1>
<canvas id="myBubbleChart"></canvas>
<input type="button" value="スタート/ストップ" onclick="button_fnc()"><br>
<div class="slidecontainer" id="sliders">
<input type="range" min="0" max="4" value="0" step="1" class="slider" id="slider_position">時系列 : <span id="val_position">4週間前</span><br/>
</div>
<!-- CDN -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.8.0/Chart.bundle.js"></script>
<script>
// バブルチャートのデータ定義（4週間前、3週間前、2週間前、1週間前、現在の順で格納）
var data1 = [[{x: 15,y: 60,r: 35}],
[{x: 21,y: 50,r: 32}],
[{x: 36,y: 44,r: 24}],
[{x: 46,y: 34,r: 34}],
[{x: 56,y: 24,r: 58}]]
var data2 = [[{x: 45,y: 50,r: 15}],
[{x: 57,y: 60,r: 25}],
[{x: 69,y: 70,r: 35}],
[{x: 70,y: 80,r: 55}],
[{x: 79,y: 83,r: 45}]]
var data3 = [[{x: 25,y: 20,r: 30}],
[{x: 35,y: 22,r: 32}],
[{x: 55,y: 24,r: 34}],
[{x: 60,y: 34,r: 39}],
[{x: 65,y: 34,r: 30}]]
var data4 = [[{x: 10,y: 70,r: 25}],
[{x: 12,y: 72,r: 22}],
[{x: 15,y: 74,r: 24}],
[{x: 20,y: 84,r: 20}],
[{x: 35,y: 74,r: 40}]]
var data5 = [[{x: 30,y: 40,r: 30}],
[{x: 51,y: 42,r: 32}],
[{x: 60,y: 44,r: 34}],
[{x: 70,y: 54,r: 34}],
[{x: 73,y: 64,r: 54}]]
var data6 = [[{x: 35,y: 50,r: 15}],
[{x: 47,y: 60,r: 25}],
[{x: 59,y: 70,r: 35}],
[{x: 69,y: 80,r: 35}],
[{x: 73,y: 70,r: 35}]]
var data7 = [[{x: 15,y: 25,r: 30}],
[{x: 17,y: 35,r: 40}],
[{x: 28,y: 45,r: 50}],
[{x: 30,y: 35,r: 60}],
[{x: 40,y: 45,r: 70}]]
var data8 = [[{x: 34,y: 40,r: 25}],
[{x: 42,y: 50,r: 15}],
[{x: 50,y: 60,r: 10}],
[{x: 60,y: 70,r: 30}],
[{x: 65,y: 45,r: 20}]]
var data9 = [[{x: 12,y: 15,r: 10}],
[{x: 17,y: 25,r: 20}],
[{x: 38,y: 35,r: 30}],
[{x: 40,y: 45,r: 30}],
[{x: 45,y: 55,r: 30}]]
// バブルチャートのデータ取得関数（添え字によって4週間前、3週間前、2週間前、1週間前、現在を切替）
function get_data1(num) {
return data1[num];
}
function get_data2(num) {
return data2[num];
}
function get_data3(num) {
return data3[num];
}
function get_data4(num) {
return data4[num];
}
function get_data5(num) {
return data5[num];
}
function get_data6(num) {
return data6[num];
}
function get_data7(num) {
return data7[num];
}
function get_data8(num) {
return data8[num];
}
function get_data9(num) {
return data9[num];
}
// スライドバーのデータ定義と取得関数（添え字によって4週間前、3週間前、2週間前、1週間前、現在を切替）
var bar_position = ['4週間前','3週間前','2週間前', '1週間前', '現在']
function get_bar_position(num) {
return bar_position[num];
}
// バブルチャート本体
var ctx = document.getElementById("myBubbleChart");
var myBubbleChart = new Chart(ctx, {
type: 'bubble',
data: {
datasets: [
{
label:"プロジェクト1",
backgroundColor: "rgba(128,128,0,0.8)",
data:get_data1(0)
},
{
label:"プロジェクト2",
backgroundColor: "rgba(255,255,0,0.8)",
data:get_data2(0)
},
{
label:"プロジェクト3",
backgroundColor: "rgba(0,255,255,0.8)",
data:get_data3(0)
},
{
label:"プロジェクト4",
backgroundColor: "rgba(0,255,0,0.8)",
data:get_data4(0)
},
{
label:"プロジェクト5",
backgroundColor: "rgba(255,0,0,0.8)",
data:get_data5(0)
},
{
label:"プロジェクト6",
backgroundColor: "rgba(0,0,255,0.8)",
data:get_data6(0)
},
{
label:"プロジェクト7",
backgroundColor: "rgba(0,128,0,0.8)",
data:get_data7(0)
},
{
label:"プロジェクト8",
backgroundColor: "rgba(128,0,128,0.8)",
data:get_data8(0)
},
{
label:"プロジェクト9",
backgroundColor: "rgba(0,0,128,0.8)",
data:get_data9(0)
}
]
},
options: {
title: {
display: true,
text: 'QCD状況（バブルが大きいほどコスト状況が悪い）'
},
scales: {
xAxes: [{
scaleLabel:{
display: true,
labelString: "進捗"
},
ticks: {
suggestedMax: 100,
suggestedMin: 0,
stepSize: 10,
callback: function(value, index, values){
return value + '%'
}
}
}],
yAxes: [{
scaleLabel:{
display: true,
labelString: "品質"
},
ticks: {
suggestedMax: 100,
suggestedMin: 0,
stepSize: 10,
callback: function(value, index, values){
return value + '%'
}
}
}]
}
},
})
//バーの位置によってバブルチャートに表示するデータを切り替える
function bubble_chart_move() {
let position = document.getElementById("slider_position").value; // sliderの値を取得
document.getElementById("val_position").textContent = get_bar_position(position); // 取得した値を"#val_position"のテキストに表示
myBubbleChart.data.datasets[0].data = get_data1(position)
myBubbleChart.data.datasets[1].data = get_data2(position)
myBubbleChart.data.datasets[2].data = get_data3(position)
myBubbleChart.data.datasets[3].data = get_data4(position)
myBubbleChart.data.datasets[4].data = get_data5(position)
myBubbleChart.data.datasets[5].data = get_data6(position)
myBubbleChart.data.datasets[6].data = get_data7(position)
myBubbleChart.data.datasets[7].data = get_data8(position)
myBubbleChart.data.datasets[8].data = get_data9(position)
myBubbleChart.update();
}
// スライダーを動かしたときのイベント
var sliders = document.getElementById("sliders");
sliders.addEventListener("input", function() {
bubble_chart_move();
}, false);
// スライドバーを一つ横に動かす。バーが右端まで来たら左端に戻る
var auto = function () {
// 今回はスライドバーの範囲を0~4と設定している
if (document.getElementById("slider_position").value < 4) {
// valueはSting型で保持されているので、プラス1する前にparseIntする
document.getElementById("slider_position").value = parseInt(document.getElementById("slider_position").value) + 1;
bubble_chart_move();
}
else {
document.getElementById("slider_position").value = 0;
bubble_chart_move();
}
}
// スタート/ストップボタンが押された時の処理
var auto_func;
var button_flag = 0; // 初期状態を0としておく
function button_fnc() {
// ボタンが押された時、button_flag = 0なら自動再生スタート
if (button_flag == 0) {
auto_func = setInterval("auto()",1000);
button_flag = 1;
}
// ボタンが押された時、button_flag = 1なら自動再生ストップ
else {
clearTimeout(auto_func);
button_flag = 0;
}
}
</script>
</body>
</html>
Reference
이 문제에 관하여(chart.js로 버블 차트를 슬라이더(슬라이드 바?)로 글리그리 움직이는 후편), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://qiita.com/supinngassenn/items/ee0cf76d58adf2a300a7
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
1단계
HTML에 '시작/정지' 버튼을 설치한다.
<input type="button" value="スタート/ストップ" onclick="button_fnc()">
상기에 의해, 버튼을 누르면 javaScript측의 button_fnc()가 불리게 된다. (스텝 3에서 정의합니다)
2단계
슬라이더를 하나 옆으로 움직이는 함수를 정의한다. 슬라이더가 오른쪽 끝까지 오면 왼쪽 끝으로 돌아가도록 if, else로 조건 분기하고 있다.
document.getElementById("slider_position").value에 슬라이더의 위치 정보가 들어 있으므로, 거기에 +1 하면 된다. 다만 문자열로 격납되어 있으므로, parseInt 하지 않으면 「0,1,11,100,,,」라고 늘어나 버린다. parseInt 하면 「0,1,2,,,」라고 늘어나 준다.
여기에 나오는 bubble_chart_move ()는 마지막으로 작성된 함수입니다.
// スライダーを一つ横に動かす。バーが右端まで来たら左端に戻る
var auto = function () {
// 今回はスライダーの範囲を0~4と設定している
if (document.getElementById("slider_position").value < 4) {
// valueはSting型で保持されているので、プラス1する前にparseIntする
document.getElementById("slider_position").value = parseInt(document.getElementById("slider_position").value) + 1;
bubble_chart_move();
}
else {
document.getElementById("slider_position").value = 0;
bubble_chart_move();
}
}
3단계
스텝 1에서 등장한 button_fnc()의 처리를 작성한다.
또한 하나의 버튼으로 "시작"과 "정지"를 전환 할 수 있도록 button_flag로 제어합니다.
auto_func = setInterval("auto()",1000); 멈출 때는 "clearTimeout(auto_func);"를 사용한다.
// スタート/ストップボタンが押された時の処理
var auto_func;
var button_flag = 0; // 初期状態を0としておく
function button_fnc() {
// ボタンが押された時、button_flag = 0なら自動再生スタート
if (button_flag == 0) {
auto_func = setInterval("auto()",1000);
button_flag = 1;
}
// ボタンが押された時、button_flag = 1なら自動再生ストップ
else {
clearTimeout(auto_func);
button_flag = 0;
}
}
이상으로 완성입니다!
최종형의 코드
아래 코드를 그대로 복사하여 브라우저에서 표시하면 실제로 시도 할 수 있습니다.
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>グラフ</title>
</head>
<body>
<h1>バブルチャート</h1>
<canvas id="myBubbleChart"></canvas>
<input type="button" value="スタート/ストップ" onclick="button_fnc()"><br>
<div class="slidecontainer" id="sliders">
<input type="range" min="0" max="4" value="0" step="1" class="slider" id="slider_position">時系列 : <span id="val_position">4週間前</span><br/>
</div>
<!-- CDN -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.8.0/Chart.bundle.js"></script>
<script>
// バブルチャートのデータ定義（4週間前、3週間前、2週間前、1週間前、現在の順で格納）
var data1 = [[{x: 15,y: 60,r: 35}],
[{x: 21,y: 50,r: 32}],
[{x: 36,y: 44,r: 24}],
[{x: 46,y: 34,r: 34}],
[{x: 56,y: 24,r: 58}]]
var data2 = [[{x: 45,y: 50,r: 15}],
[{x: 57,y: 60,r: 25}],
[{x: 69,y: 70,r: 35}],
[{x: 70,y: 80,r: 55}],
[{x: 79,y: 83,r: 45}]]
var data3 = [[{x: 25,y: 20,r: 30}],
[{x: 35,y: 22,r: 32}],
[{x: 55,y: 24,r: 34}],
[{x: 60,y: 34,r: 39}],
[{x: 65,y: 34,r: 30}]]
var data4 = [[{x: 10,y: 70,r: 25}],
[{x: 12,y: 72,r: 22}],
[{x: 15,y: 74,r: 24}],
[{x: 20,y: 84,r: 20}],
[{x: 35,y: 74,r: 40}]]
var data5 = [[{x: 30,y: 40,r: 30}],
[{x: 51,y: 42,r: 32}],
[{x: 60,y: 44,r: 34}],
[{x: 70,y: 54,r: 34}],
[{x: 73,y: 64,r: 54}]]
var data6 = [[{x: 35,y: 50,r: 15}],
[{x: 47,y: 60,r: 25}],
[{x: 59,y: 70,r: 35}],
[{x: 69,y: 80,r: 35}],
[{x: 73,y: 70,r: 35}]]
var data7 = [[{x: 15,y: 25,r: 30}],
[{x: 17,y: 35,r: 40}],
[{x: 28,y: 45,r: 50}],
[{x: 30,y: 35,r: 60}],
[{x: 40,y: 45,r: 70}]]
var data8 = [[{x: 34,y: 40,r: 25}],
[{x: 42,y: 50,r: 15}],
[{x: 50,y: 60,r: 10}],
[{x: 60,y: 70,r: 30}],
[{x: 65,y: 45,r: 20}]]
var data9 = [[{x: 12,y: 15,r: 10}],
[{x: 17,y: 25,r: 20}],
[{x: 38,y: 35,r: 30}],
[{x: 40,y: 45,r: 30}],
[{x: 45,y: 55,r: 30}]]
// バブルチャートのデータ取得関数（添え字によって4週間前、3週間前、2週間前、1週間前、現在を切替）
function get_data1(num) {
return data1[num];
}
function get_data2(num) {
return data2[num];
}
function get_data3(num) {
return data3[num];
}
function get_data4(num) {
return data4[num];
}
function get_data5(num) {
return data5[num];
}
function get_data6(num) {
return data6[num];
}
function get_data7(num) {
return data7[num];
}
function get_data8(num) {
return data8[num];
}
function get_data9(num) {
return data9[num];
}
// スライドバーのデータ定義と取得関数（添え字によって4週間前、3週間前、2週間前、1週間前、現在を切替）
var bar_position = ['4週間前','3週間前','2週間前', '1週間前', '現在']
function get_bar_position(num) {
return bar_position[num];
}
// バブルチャート本体
var ctx = document.getElementById("myBubbleChart");
var myBubbleChart = new Chart(ctx, {
type: 'bubble',
data: {
datasets: [
{
label:"プロジェクト1",
backgroundColor: "rgba(128,128,0,0.8)",
data:get_data1(0)
},
{
label:"プロジェクト2",
backgroundColor: "rgba(255,255,0,0.8)",
data:get_data2(0)
},
{
label:"プロジェクト3",
backgroundColor: "rgba(0,255,255,0.8)",
data:get_data3(0)
},
{
label:"プロジェクト4",
backgroundColor: "rgba(0,255,0,0.8)",
data:get_data4(0)
},
{
label:"プロジェクト5",
backgroundColor: "rgba(255,0,0,0.8)",
data:get_data5(0)
},
{
label:"プロジェクト6",
backgroundColor: "rgba(0,0,255,0.8)",
data:get_data6(0)
},
{
label:"プロジェクト7",
backgroundColor: "rgba(0,128,0,0.8)",
data:get_data7(0)
},
{
label:"プロジェクト8",
backgroundColor: "rgba(128,0,128,0.8)",
data:get_data8(0)
},
{
label:"プロジェクト9",
backgroundColor: "rgba(0,0,128,0.8)",
data:get_data9(0)
}
]
},
options: {
title: {
display: true,
text: 'QCD状況（バブルが大きいほどコスト状況が悪い）'
},
scales: {
xAxes: [{
scaleLabel:{
display: true,
labelString: "進捗"
},
ticks: {
suggestedMax: 100,
suggestedMin: 0,
stepSize: 10,
callback: function(value, index, values){
return value + '%'
}
}
}],
yAxes: [{
scaleLabel:{
display: true,
labelString: "品質"
},
ticks: {
suggestedMax: 100,
suggestedMin: 0,
stepSize: 10,
callback: function(value, index, values){
return value + '%'
}
}
}]
}
},
})
//バーの位置によってバブルチャートに表示するデータを切り替える
function bubble_chart_move() {
let position = document.getElementById("slider_position").value; // sliderの値を取得
document.getElementById("val_position").textContent = get_bar_position(position); // 取得した値を"#val_position"のテキストに表示
myBubbleChart.data.datasets[0].data = get_data1(position)
myBubbleChart.data.datasets[1].data = get_data2(position)
myBubbleChart.data.datasets[2].data = get_data3(position)
myBubbleChart.data.datasets[3].data = get_data4(position)
myBubbleChart.data.datasets[4].data = get_data5(position)
myBubbleChart.data.datasets[5].data = get_data6(position)
myBubbleChart.data.datasets[6].data = get_data7(position)
myBubbleChart.data.datasets[7].data = get_data8(position)
myBubbleChart.data.datasets[8].data = get_data9(position)
myBubbleChart.update();
}
// スライダーを動かしたときのイベント
var sliders = document.getElementById("sliders");
sliders.addEventListener("input", function() {
bubble_chart_move();
}, false);
// スライドバーを一つ横に動かす。バーが右端まで来たら左端に戻る
var auto = function () {
// 今回はスライドバーの範囲を0~4と設定している
if (document.getElementById("slider_position").value < 4) {
// valueはSting型で保持されているので、プラス1する前にparseIntする
document.getElementById("slider_position").value = parseInt(document.getElementById("slider_position").value) + 1;
bubble_chart_move();
}
else {
document.getElementById("slider_position").value = 0;
bubble_chart_move();
}
}
// スタート/ストップボタンが押された時の処理
var auto_func;
var button_flag = 0; // 初期状態を0としておく
function button_fnc() {
// ボタンが押された時、button_flag = 0なら自動再生スタート
if (button_flag == 0) {
auto_func = setInterval("auto()",1000);
button_flag = 1;
}
// ボタンが押された時、button_flag = 1なら自動再生ストップ
else {
clearTimeout(auto_func);
button_flag = 0;
}
}
</script>
</body>
</html>
Reference
이 문제에 관하여(chart.js로 버블 차트를 슬라이더(슬라이드 바?)로 글리그리 움직이는 후편), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/supinngassenn/items/ee0cf76d58adf2a300a7텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
