По умолчанию при построении диаграммы к каждому из линейных графиков добавляется легенда. При клике на легенду диаграммы соответствующий график скрывается или показывается на диаграмме. Пример диаграммы с отключенным графиком:
Но хотелось бы реализовать данный функционал совместно с мульти-селектом, который представляет из себя набор checkbox. Каждый из checkbox соответствует одному из линейных графиков на диаграмме.
Vue.config.productionTip = false
Vue.config.devtools = false
import Vue from 'vue'
import {
Line
} from 'vue-chartjs'
Vue.component('my-line', {
extends: Line,
props: ['data', 'options'],
mounted() {
this.renderChart(this.data, this.options)
}
})
const Chart = {
template: `<div id="app" class="relative flex items-center">
<my-line
v-if="showLine"
:width="700"
:height="300"
:styles="{position: 'relative'}"
:options="options"
:data="lineData"
></my-line>
</div>`,
name: 'chart',
data() {
return {
showLine: false,
position: "relative",
options: {
responsive: false,
maintainAspectRatio: false,
tooltips: {
enabled: false,
custom: false
},
scales: {
xAxes: [{
gridLines: {
display: false,
color: "rgba(255, 255, 255, 0)"
},
ticks: {
fontFamily: "Montserrat"
}
}],
yAxes: [{
gridLines: {
display: false,
color: "rgba(255, 255, 255, 0)"
},
ticks: {
display: false,
fontFamily: "Montserrat"
}
}]
}
},
lineData: {
labels: [
"Янв",
"Фев",
"Мар",
"Апр",
"Май",
"Июн",
"Июл",
"Авг",
"Сен",
"Окт",
"Ноя",
"Дек"
],
datasets: [{
label: "one",
lineTension: 0,
fill: false,
borderColor: "#466FFF",
backgroundColor: "#ffffff00",
data: [20, 35, 14, 15, 45, 38, 35, 50, 30, 36, 18, 20]
},
{
label: "two",
lineTension: 0,
fill: false,
borderColor: "#FF4286",
backgroundColor: "#ffffff00",
data: [30, 45, 24, 25, 55, 48, 45, 60, 40, 46, 28, 30]
},
{
label: "three",
lineTension: 0,
fill: false,
borderColor: "#31DDA9",
backgroundColor: "#ffffff00",
data: [40, 55, 34, 35, 65, 58, 55, 70, 50, 56, 38, 40]
}
]
}
};
},
mounted() {
this.showLine = true;
},
computed: {
myStyles() {
return {
position: "relative"
};
}
}
}
const Multi = {
template: `<div class="dropdown relative font-semibold cursor-pointer" @mouseenter="over_element=true"
@mouseleave="over_element=false">
<div @click.stop="toggle_dropdown" :class="[ active ? 'add-shadow rounded-top' : 'rounded-full']"
class="multiStyles heading">
<p>{{selected_names || placeholder}}</p>
<div style="padding-right: 16.5px;">
</div>
</div>
<div v-show="active" :class="[ active ? 'add-shadow' : '' ]" class="options">
<div class="option multiOption" v-for="(option, idx) in temp_options" :key="idx"
@click.stop="select_option(idx)">
<checkbox :checked="option.checked" class="multiCheck" />
<p class="multiP">{{option.name}}</p>
<div class="colorBox"></div>
</div>
</div>
</div>`,
name: 'multi',
components: {
'checkbox': Checkbox,
},
props: {
options: {
type: Array,
required: true
},
placeholder: {
type: String,
default: 'Select',
}
},
created() {
this.temp_options = this.options;
this.temp_options.forEach((item) => {
item.checked = false;
})
},
data() {
return {
active: false,
selected: [],
over_element: false,
temp_options: [],
};
},
methods: {
toggle_dropdown() {
this.active = !this.active;
},
close() {
if (this.active) {
this.active = false;
}
},
set_selected(event) {
this.selected.name = event.name;
this.selected.value = event.value;
},
select_option(idx) {
let index = this.selected.findIndex((item) => item.value === this.options[idx].value);
if (index >= 0) {
this.temp_options[idx].checked = false;
this.selected.splice(index, 1);
} else {
this.temp_options[idx].checked = true;
this.selected.push(this.options[idx]);
}
},
computed: {
selected_names() {
return this.selected.map((item) => item.name).join(', ');
}
},
watch: {
selected() {
this.$emit('input', this.selected);
}
}
}
}
const Checkbox = {
template: `
<label class="check-container"><slot class="pt-1" />
<input type="checkbox" @change="$emit('inut', check)" :checked="check" @click="check=!check">
<span class="checkmark"></span>
</label>`,
name: 'checkbox',
props: {
checked: {
type: Boolean,
default: false,
}
},
created() {
this.check = this.checked;
},
data() {
return {
check: '',
}
},
watch: {
checked() {
this.check = this.checked;
}
}
};
const App = {
template: `
<multi
class="multiWidth"
:options="options_example2"
:placeholder="placeholder"
v-model="selected"
/>
<chart></chart>`,
components: {
'multi': Multi,
'chart': Chart
},
data() {
return {
options_example2: [{
value: 0,
name: "one"
},
{
value: 1,
name: "two"
},
{
value: 2,
name: "three"
}
],
placeholder: " "
}
}
}
new Vue({
el: '#app',
components: {
App
},
template: `<app></app>`
})
.multiWidth {
width: 200px;
height: 40px;
}
.multiStyles {
display: flex;
justify-content: flex-start;
align-items: center;
background: white;
padding-top: 0.75rem;
padding-bottom: 0.75rem;
border: 1px solid black;
padding-left: 4px;
}
.multiStyles p {
white-space: nowrap;
font-size: 14px;
}
.heading {
max-height: 43px !important;
}
.multiStyles div {
margin-left: auto;
display: flex;
align-items: center;
}
.rounded-full {
border-radius: 20px;
}
.rounded-top {
border-top-left-radius: 20px;
border-top-right-radius: 20px;
}
.options {
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;
width: 100%;
position: absolute;
overflow: hidden;
z-index: 100;
border: 1px solid black;
}
.option {
position: relative;
cursor: pointer;
font-weight: 500;
display: flex;
padding-left: 4;
}
.multiOption {
display: flex;
align-items: center;
}
.options .option:hover {
background: gray;
}
.multiCheck {
margin-top: -1.5rem;
}
.multiP {
margin-left: -0.25rem;
}
.rotate {
transform: rotate(-180deg);
}
.add-shadow {
box-shadow: 0px 4px 10px rgba(96, 90, 107, 0.18);
}
.check-container {
display: block;
position: relative;
padding-left: 30px;
font-weight: 600;
cursor: pointer;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.check-container input {
position: absolute;
opacity: 0;
cursor: pointer;
height: 0;
width: 0;
}
.checkmark {
position: absolute;
top: 4.5px;
left: 0;
height: 16px;
width: 16px;
border: 1px solid #DCD8E3;
border-radius: 3px;
transition: all .2s ease;
}
.check-container:hover .checkmark::after {
display: block;
content: '';
position: absolute;
}
.check-container::after {
content: "";
position: absolute;
display: none;
}
.check-container input:checked~.checkmark::after {
display: block;
content: '';
position: absolute;
}
.check-container .checkmark::after {
left: 5px;
top: 2px;
width: 4px;
height: 8px;
border: solid white;
border-width: 0 2px 2px 0;
-webkit-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg);
}
.colorBox {
width: 5px;
height: 5px;
border-radius: 2px;
}
<div id="app" v-cloak></div>
<script src='https://cdnjs.cloudflare.com/ajax/libs/vue-chartjs/3.4.2/vue-chartjs.js'></script>
Как обновить диаграмму при изменении графиков?