javascript - Chartist.js 响应式

Question

我有一个水平图表栏。它在桌面上看起来不错，但是在移动版本（低于 480 像素）中，它变得更小了。我在其网站上查看了 chartist 响应选项，但是，我无法在我的 js 代码中实现响应选项。我想在移动版本中显示它足够大。我愿意在移动版本中使条形图垂直。

 $('#section-sk').waypoint(function(direction){
    if(direction === 'down'){
      $('.js-animation-2').addClass('animated fadeInUp')


      var myChart = new Chartist.Bar('.ct-chart', {
        labels: ['Text-7', 'Text-6', 'Text-5', 'Text-4', 'Text-3', 'Text-2', 'Text1'],
        series: [
        [
        {meta: 'Something', value: 50},
        {meta: 'Something', value: 80},
        {meta: 'Something', value: 100},
        {meta: 'Something', value: 75},
        {meta: 'Something', value: 15},
        {meta: 'Something', value: 80},
        {meta: 'Something', value: 40}
        ]
        ]
      }, {

      horizontalBars: true,
      low: 10,
      high: 100,
      axisY: {
        offset: 75
      },

      axisX: {
        offset: 50,
        type: Chartist.FixedScaleAxis,
        ticks: [10,20, 30,40, 50, 60, 70, 80, 90, 100],
      },

      plugins: [
      Chartist.plugins.tooltip()
      ]
    });

标签： javascriptresponsivechartist.js

Answer 1

尝试这个

var myChart = new Chartist.Bar('.ct-chart', {
        labels: ['Text-7', 'Text-6', 'Text-5', 'Text-4', 'Text-3', 'Text-2', 'Text1'],
        series: [
        [
        {meta: 'Something', value: 50},
        {meta: 'Something', value: 80},
        {meta: 'Something', value: 100},
        {meta: 'Something', value: 75},
        {meta: 'Something', value: 15},
        {meta: 'Something', value: 80},
        {meta: 'Something', value: 40}
        ]
        ]
      }, {

      horizontalBars: true,
      low: 10,
      high: 100,
      axisY: {
        offset: 75
      },

      axisX: {
        offset: 50,
        type: Chartist.FixedScaleAxis,
        ticks: [10,20, 30,40, 50, 60, 70, 80, 90, 100],
      }
      },[
  // Options override for media < 480px
  ['screen and (max-width: 480px)', {
    reverseData: true,
    horizontalBars: true,
    ticks: [20, 40, 60, 80, 100],
  }]
]);

<script src="https://rawgit.com/gionkunz/chartist-js/master/dist/chartist.min.js"></script>
<link href="https://rawgit.com/gionkunz/chartist-js/master/dist/chartist.min.css" rel="stylesheet"/>
<div class="ct-chart ct-square"></div>