3

我正在 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>
4

1 回答 1

3

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

在您的情况下，我将使用以下内容定位图表容器：

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

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

或者如果您想访问标签：

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

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

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

于 2016-11-21T02:14:47.437 回答