Space 用于 Chartist 中的长标签

Question

我正在 Framework7 中构建一个小型应用程序，使用 Chartist 来制作一些图表。例如，我创建了一个 jsfiddle。你可以在这里看到它：https://jsfiddle.net/emergingdzns/hpr6u8uk/1/

问题（如您在示例中所见）是垂直条上的长标签被截断了。有什么办法可以解决这个问题？

这是javascript：

// Initialize your app
var myApp = new Framework7();

// Export selectors engine
var $$ = Dom7;

var dataChart1 = [
  26400,
  50500,
  73200,
  101100
];

new Chartist.Bar('#coveredChart', {
  labels: ['1. Everyone has to have health insurance.',
    '2. People can choose to have - or not have - health insurance.',
    '3. People with pre-existing conditions are excluded.',
    '4. Of those with health insurance, one becomes ill.'
  ],
  series: [dataChart1]
});

这是HTML：

<div class="views">
  <!-- Your main view, should have "view-main" class-->
  <div class="view view-main">
    <!-- Top Navbar-->
    <div class="navbar">
      <div class="navbar-inner">
        <!-- We have home navbar without left link-->
        <div class="center sliding">ClareFolio</div>
      </div>
    </div>
    <!-- Pages, because we need fixed-through navbar and toolbar, it has additional appropriate classes-->
    <div class="pages">
      <!-- Page, data-page contains page name-->
      <div data-page="covered" class="page">
        <!-- Scrollable page content-->
        <div class="page-content">
          <br>
          <div class="content-block-title" style="text-align:center;">Example chart below</div>
          <div class="content-block">
            <div class="content-block-inner">
              <div class="chart">
                <div id="coveredChart" class="ct-chart ct-golden-section"></div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

Answer 1

图表师的想法是将表示和数据分开，因此所有图表元素都可以通过 Css 访问。

在你的情况下，我会使用类似这样的内容来定位图表容器：

.ct-chart-bar{
 padding-bottom: 140px;
}

您可能需要调整它以与您的框架容器一起使用，并在调整大小时重新计算，无论哪种情况，检查器都是您最好的朋友。

或者如果您想访问标签：

 span.ct-label.ct-horizontal.ct-end {}

此外，从 UI/UX 数据可视化的角度来看，如果您的标签那么长，您几乎可以肯定在您的演示文稿中有错误并且正在进入图表垃圾领域。这实际上是最简单的解决方案，因为您所要做的就是添加更短的标签，标题也可能有帮助。

正在读取您的数据（不确定它是否只是虚拟数据），将这些数据集放在同一个图表中确实没有意义。

Space 用于 Chartist 中的长标签

Space for long labels in Chartist

javascript

chartist.js

html-framework-7