Chartist.js响应式
Chartist.js响应式
提问于 2018-07-29 07:11:25
我有一个水平图表条。它在台式机上看起来还可以，但是在移动版本(低于480px)，它变得更小了。我已经在其网站上查看了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()
]
});回答 1
Stack Overflow用户
发布于 2018-07-29 07:53:05
尝尝这个
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>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/51575945
复制相关文章
相似问题
腾讯云开发者
