问题
I have a question about vue-chartjs. I need to achieve a result like this one in jsfiddle: http://jsfiddle.net/mbhavfwm/
Here is my vuejs component's code (Chart data is sent by params).
<script>
import { Line, mixins } from 'vue-chartjs'
import zoom from 'chartjs-plugin-zoom';
const { reactiveProp } = mixins;
export default {
extends: Line,
mixins: [reactiveProp],
data () {
return {
options: {
scales: {
yAxes: [{
ticks: {
beginAtZero: true
},
gridLines: {
display: true
}
}],
xAxes: [
{
gridLines: {
display: false
},
type: "time",
time: {
format: "HH:mm:ss",
displayFormats: {
'millisecond': 'h:mm a',
'second': 'h:mm a',
'minute': 'h:mm a',
'hour': 'h:mm a',
'day': 'h:mm a',
'week': 'h:mm a',
'month': 'h:mm a',
'quarter': 'h:mm a',
'year': 'h:mm a',
},
unit: "minute",
unitStepSize: 5,
},
},
]
},
legend: {
display: false
},
responsive: true,
maintainAspectRatio: false,
// Container for pan options
pan: {
// Boolean to enable panning
enabled: true,
// Panning directions. Remove the appropriate direction to disable
// Eg. 'y' would only allow panning in the y direction
mode: 'xy'
},
// Container for zoom options
zoom: {
// Boolean to enable zooming
enabled: true,
// Zooming directions. Remove the appropriate direction to disable
// Eg. 'y' would only allow zooming in the y direction
mode: 'xy',
}
}
}
},
mounted () {
this.addPlugin(zoom);
this.renderChart(this.chartData, this.options)
}
}
</script>
I want to represent user's walking speed during different activities in a day. So all the activities may be distributed over all the hours of a day. I´m attaching a picture that shows 2 different activities as an example. What I want to achieve is drawing them in different moments of the day, so I need to use a horizontal scroll.
I tried to use 'zoom' plugin but I didn't like it that much. I would appreciate any help or suggestion.
回答1:
Finally I found an answer by my own: First, we have to set a div around the chartjs component, which is in this case. Then a little of css is needed. So it would be like this:
<div class="chartAreaWrapper">
<walking-speed-line-chart
v-if="chartElements1.dataCollectionLoaded"
:chart-data="chartElements1.dataCollection"
style="float: left" class="walking-speed-chart"></walking-speed-line-chart>
</div>
And corresponding css:
.chartAreaWrapper {
width: 80%;
overflow-x: scroll;
}
.walking-speed-chart{
margin-top: 20px;
height: 170px;
width: 1200px;
}
As you can see, you only need to set an overflow-x: scroll property in the container div of your component. Then just fix as much width as you want. Hope it helps!
来源:https://stackoverflow.com/questions/53548466/horizontal-scroll-in-vue-chartjs