I use the chartkick library to wrap chart.js in vue. I was trying to implement multiple datasets into one chart with the following code:
<template>
<area-chart width="900px" :data="chartData" :colors="['#cc0088', '#f59b42']" ></area-chart>
</template>
<script>
chartData: [{
label:"Line-1",
data: [12.5, 3.1, 2.3, 1.2, 8.5],
}, {
label:"Line-2",
data: [12.5, 4.1, 3.3, 4.2, 15.5],
}],
</script>
And I found an example, how it is done in plain JS:
var data = {
labels: ["-2h", "-10m", "-7m", "-2m", "-5s"],
datasets: [{
label:"Line-1",
data: [12.5, 3.1, 2.3, 1.2, 8.5],
fillColor: "rgba(151,187,205,0.2)",
strokeColor: "rgba(151,187,205,1)",
pointColor: "rgba(200,10,10,1)",
pointStrokeColor: "#fff",
pointHighlightFill: "#fff",
pointHighlightStroke: "rgba(151,187,205,1)",
}, {
label:"Line-2",
data: [12.5, 4.1, 3.3, 4.2, 15.5],
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)",
},
]
};
Here is the complete code to that example. What is the proper way to wrap it?
I found the solution if anyone is facing the same issue:
<template>
<div>
<area-chart :data="tableData"></area-chart>
</div>
</template>
data() {
return {
tableData: [
{name: 'Usage', data: {'2017-01-01': 3, '2017-01-02': 4}},
{name: 'Revenue', data: {'2017-01-01': 5, '2017-01-02': 3}}
]
}
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.