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

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

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

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

您可能需要调整它以使用框架容器并在调整大小时重新计算，在任何情况下，检查员都是您最好的朋友。

或者如果您想要访问标签：

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

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

读取数据（不确定它是否只是虚拟数据），将这些数据集放在同一个图表中并不合理。

Chartist中长标签的空间

1 个答案: