vue-chartj의 수평 스크롤

vue-chartj의 수평 스크롤

vue-chartjs에 대한 질문이 있습니다.jsfiddle에서 다음과 같은 결과를 얻을 필요가 있습니다.http://jsfiddle.net/mbhavfwm/
다음은 vuejs 컴포넌트의 코드입니다(차트 데이터는 파라미터로 전송됩니다).

<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>

하루의 다른 활동 중 사용자의 보행 속도를 나타내고 싶다.그래서 모든 활동이 하루의 모든 시간에 걸쳐 분산될 수 있습니다.예시로 두 가지 활동을 나타낸 사진을 첨부합니다.제가 원하는 것은 하루 중 다른 순간에 그것들을 그리는 것이기 때문에 가로 스크롤을 사용해야 합니다.

'줌' 플러그인을 사용하려고 했지만 별로 마음에 들지 않았다.어떤 도움이나 제안이라도 주시면 감사하겠습니다.

마침내 나는 나만의 답을 찾았다.먼저 chartjs 컴포넌트 주위에 div를 설정해야 합니다(이 경우).그러면 약간의 css가 필요합니다.그래서 다음과 같이 됩니다.

<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>

대응하는 css:

.chartAreaWrapper {
       width: 80%;
       overflow-x: scroll;
  }

.walking-speed-chart{
       margin-top: 20px;
       height: 170px;
       width: 1200px;
  }

보시다시피 컴포넌트의 컨테이너 div에서 overflow-x: 스크롤 속성만 설정하면 됩니다.그럼 너비를 원하는 만큼만 고정하세요.도움이 됐으면 좋겠다!

언급URL : https://stackoverflow.com/questions/53548466/horizontal-scroll-in-vue-chartjs