vue-chartjs中的水平滚动

Question

我有一个关于vue-chartjs的问题。我需要在jsfiddle中实现这样的结果：http://jsfiddle.net/mbhavfwm/

这是我的vuejs组件的代码(图表数据由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>

我想表示用户在一天中的不同活动中的步行速度。因此，所有的活动可能分布在一天的所有小时内。我附上了一张图片，其中显示了2个不同的活动作为例子。我想要实现的是在一天中的不同时刻绘制它们，所以我需要使用水平滚动。

我试着使用“缩放”插件，但我不太喜欢它。如果有任何帮助或建议我将不胜感激。

​

Answer 1

最后，我自己找到了答案:首先，我们必须围绕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: scroll属性。然后只要你想要的宽度固定就行了。希望它能帮上忙！