Question

我使用Chartis.js创建了一个图表。我喜欢它，因为它的响应。但水平标签看起来没有响应，我试图让X标签旋转90度以保留大量空间，但它不起作用。

<?php
    include('dbconnection.php');
    $result = [];
    //SELECT data for div1 (part you already have)
    $result[] = $mysql_result_as_html_for_outputdiv_1; // In your case this would be a html string
    //SELECT other data for div2
    $result[] = $mysql_result_as_html_for_outputdiv_2; // In your case this would be a html string

    header('Content-Type: application/json');
    echo json_encode($result);
?>

请帮助我，你可以在这里看到我的小提琴https://jsfiddle.net/740yajof/

Answer 1

我不确定为什么，但是当您将图表脚本和样式移动到外部资源时，它的效果非常好。无需!important或供应商前缀-webkit-*。我刚刚添加transform-origin: left将旋转锚点向左移动（默认情况下它位于中间）。

.ct-label.ct-horizontal.ct-end {
    transform:rotate(90deg);
    transform-origin: 0;
}

工作示例：https://jsfiddle.net/LukaszWiktor/15zyq0q1/

CSS：转换旋转不适用于span内部SVG标记

1 个答案: