javascript - Chartist 中长标签的空间

Question

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

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

这是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

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

在你的情况下，我会用这样的东西来定位图表容器:

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

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

或者如果你想访问标签:

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

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

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