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种不同的活动。我想要实现的是在一天的不同时刻绘制它们，因此我需要使用水平滚动。

我尝试使用'zoom'插件，但我不太喜欢它。我将不胜感激。

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属性。然后，只需固定所需的宽度即可。希望对您有帮助！

vue-chart.js中的水平滚动

1 个答案: