zing-chart ring text align to center

Я не могу выровнять текст по центру. zing-chart ring text align to center

HTML код

<zingchart id="ring" zc-json="data" ></zingchart>

zingchart данные JSON

$scope.data = { 
    globals: { 
     shadow: false, 
     fontFamily: "Verdana", 
     fontWeight: "100" 
    }, 
    type: "ring", 
    backgroundColor: "#fff", 

    legend: { 
     layout: "x5", 
     position: "50%", 
     borderColor: "transparent", 
     marker: { 
      borderRadius: 10, 
      borderColor: "transparent" 
     } 
    }, 
    tooltip: { 
     text: "%v $" 
    }, 
    plot: { 
     refAngle: "-90", 
     borderWidth: "0px", 
     valueBox: { 
      placement: "in", 
      text: "%npv %", 
      "font-color":"black", 
      fontSize: "15px", 
      textAlpha: 1, 
     } 
    }, 
    series: [{ 
     text: "Total Billed", 
     values: $scope.billedHours, 
     backgroundColor: "#97c563", 
    }, { 
     text: "Total Budget", 
     values: $scope.projectRevenue, 
     backgroundColor: "#f7d347", 
    }] 
};

Я использую этот Libary в первый раз, пробовал разные варианты, но ничего случилось. нужна помощь экспертов, пожалуйста, предложите что-нибудь. благодарит заранее.

источник

2017-02-07 piyush singh

пост jsfiddle ссылка –

не в состоянии генерировать график на jsfiddle с angularjs. –

В будущем вам придется публиковать скрипку или, по крайней мере, ваш полный график JSON со значениями. Если у вас есть проблемы, связанные с рендерингом диаграммы, ваши данные являются одной из наиболее важных вещей. https://help.zingchart.com/hc/en-us/articles/115000680146-How-To-Get-My-Chart-JSON- – nardecky

Я попробовал это в моем проекте, и это должно сделать трюк, просто заменить вашу собственность легенды с этим.

Если я прав, вы можете также использовать layout: "center"

  legend: { 
       layout: "2x2", //this should center it on mid 
       position: "50%", 
       borderColor: "transparent", 
       marker: { 
        borderRadius: 10, 
        borderColor: "transparent" 
       } 
      },

источник

2017-02-07 18:21:14 Martin

Макет: «2x2» работал, спасибо. –

Для выравнивания центра легенды вы можете использовать атрибут align:center. Мы имеем обширную документацию по следующим ссылкам:

Legend Tutorial

Legend JSON Docs

var myConfig = { 
 
    \t type: 'pie', 
 
    \t plot: { 
 
    \t layout: 'auto' 
 
    \t }, 
 
    legend: { 
 
     layout: "x5", 
 
     align: 'center', 
 
     borderColor: "transparent", 
 
     marker: { 
 
      borderRadius: 10, 
 
      borderColor: "transparent" 
 
     } 
 
    }, 
 
\t series: [ 
 
\t \t { 
 
\t \t \t values: [35] 
 
\t \t }, 
 
\t \t { 
 
\t \t \t values: [25] 
 
\t \t }, 
 
\t \t { 
 
\t \t \t values: [15] 
 
\t \t }, 
 
\t \t { 
 
\t \t \t values: [45] 
 
\t \t }, 
 
\t \t { 
 
\t \t \t values: [75] 
 
\t \t } 
 
\t ] 
 
}; 
 

 
zingchart.render({ 
 
\t id: 'myChart', 
 
\t data: myConfig, 
 
\t height: '100%', 
 
\t width: '100%' 
 
});

html, body { 
 
\t height:100%; 
 
\t width:100%; 
 
\t margin:0; 
 
\t padding:0; 
 
} 
 
#myChart { 
 
\t height:100%; 
 
\t width:100%; 
 
\t min-height:150px; 
 
} 
 
.zc-ref { 
 
\t display:none; 
 
}

<!DOCTYPE html> 
 
<html> 
 
\t <head> 
 
\t \t <script src= "https://cdn.zingchart.com/zingchart.min.js"></script> 
 
\t </head> 
 
\t <body> 
 
\t \t <div id="myChart"><a class="zc-ref" href="https://www.zingchart.com">Powered by ZingChart</a></div> 
 
\t </body> 
 
</html>

источник

2017-02-07 18:19:09 nardecky

ответ

Смежные вопросы