Горизонтальная прокрутка в vue-chartjs - PullRequest
Новая
       40

Горизонтальная прокрутка в vue-chartjs

0 голосов
/ 30 ноября 2018

У меня вопрос по поводу 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>

Я хочу представить скорость ходьбы пользователя во времяразличные мероприятия в день.Таким образом, все действия могут быть распределены по всем часам дня.Я прилагаю картинку, которая показывает 2 различных действия в качестве примера.Чего я хочу добиться, так это рисовать их в разные моменты дня, поэтому мне нужно использовать горизонтальную прокрутку.

Я пытался использовать плагин 'zoom', но мне он не очень понравился.Буду признателен за любую помощь или предложение. enter image description here

1 Ответ

0 голосов
/ 30 ноября 2018

Наконец-то я нашел свой собственный ответ: во-первых, мы должны установить div для компонента chartjs, что в данном случае.Тогда немного 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;
  }

Как видите, вам нужно только установить свойство overflow-x: scroll в контейнере divвашего компонента.Затем просто установите столько ширины, сколько хотите.Надеюсь, это поможет!

...