Нанесение фигуры, вставка данных

Question

Работа над проектом и была предоставлена ​​в качестве части дизайна. Как вы видите, это довольно простая форма, однако требование состоит в том, что данные, которые вы видите (цифры), должны отображать их соответствующее значение, это значение приведет к тому, какой цвет имеет срез на диаграмме.

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

• вручную нанесение изображения с помощью CanvasJS
• Воссоздания изображения с помощью CSS и вращая каждый элемент
• Использования ChartJS/Google Charts и пытаюсь настроить

Оба методы разочаровывает и отнимает много времени , Помимо того, что вы делаете это во Flash, есть ли какие-либо предложения или вещи, которые я полностью пропустил, что я мог бы попробовать?

Answer 1

Если кто-то попадается этот вопрос, я в конечном итоге найти и использовать Method Draw, которая не у всех идеальное решение, и я потерял мою работу несколько раз. Тем не менее, способность рисовать и генерировать SVG «на лету» очень полезна.

Answer 2

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

var chart1 = new CanvasJS.Chart("chartContainer1", 
 
{ \t 
 
\t legend: { 
 
\t \t verticalAlign: "center", 
 
\t \t horizontalAlign: "left" 
 
\t }, 
 
\t data: [ 
 
\t { 
 
\t \t type: "doughnut", 
 
\t \t showInLegend: true, 
 
\t \t indexLabel: "{y}", 
 
\t \t indexLabelPlacement: "inside", 
 
\t \t dataPoints: [ 
 
\t \t \t { y: 71 }, 
 
\t \t \t { y: 55 }, 
 
\t \t \t { y: 50 }, 
 
\t \t \t { y: 65 }, 
 
\t \t \t { y: 95 }, 
 
\t \t \t { y: 68 }, 
 
\t \t \t { y: 28 }, 
 
\t \t \t { y: 34 }, 
 
\t \t \t { y: 14 } 
 
\t \t ] 
 
\t }, 
 
    
 
\t ] 
 
}); 
 
var chart2 = new CanvasJS.Chart("chartContainer2", 
 
{   
 
\t backgroundColor: "transparent", 
 
\t title: { 
 
\t \t text: "Your Score is 10", 
 
\t \t verticalAlign: "center", 
 
\t \t horizontalAlign: "center", 
 
\t \t dockInsidePlotArea: true, 
 
\t \t maxWidth: 60 
 
\t }, 
 
\t data: [ 
 
\t { 
 
\t \t type: "doughnut", 
 
\t \t indexLabel: "{y}", 
 
\t \t indexLabelPlacement: "inside", 
 
\t \t dataPoints: [ 
 
\t \t \t { y: 71 }, 
 
\t \t \t { y: 55 }, 
 
\t \t \t { y: 50 }, 
 
\t \t \t { y: 65 }, 
 
\t \t \t { y: 95 }, 
 
\t \t \t { y: 68 }, 
 
\t \t \t { y: 28 }, 
 
\t \t \t { y: 34 }, 
 
\t \t \t { y: 14 } 
 
\t \t ] 
 
\t } 
 
    \t ] 
 
}); 
 

 
chart1.render(); 
 
chart2.render();

#parent { 
 
    position: relative; 
 
} 
 

 
#chartContainer1, #chartContainer2 { 
 
    position: absolute; 
 
    top: 50%; 
 
    left: 50%; 
 
    transform: translate(-50%); 
 
} 
 
#chartContainer1 { 
 
    width:800px; 
 
    height:250px; 
 
} 
 
#chartContainer2 { 
 
    transform: translate(-28%, 24%); 
 
    width:200px; 
 
    height:170px; 
 
}

<script src="http://canvasjs.com/assets/script/canvasjs.min.js"></script> 
 
<div id="parent"> 
 
    <div id="chartContainer1"></div> 
 
    <div id="chartContainer2"></div> 
 
</div>