Javascript Pie Ch

Я пытаюсь настроить круговую диаграмму отсюда: https://canvasjs.com/jquery-charts/pie-chart-index-data-label-inside/

Код, который я использовал, с моими изменениями приведен ниже:

<script type = "text/javascript">
window.onload = function() {

var options = {
exportEnabled: true,
animationEnabled: true,
title:{
    text: "Operational Excellence"
},
data: [{
    type: "pie",
    showInLegend: false,
    indexLabel: "{name}",
    indexLabelPlacement: "inside",
    dataPoints: [
        { y: 16.66666666666667, name: "Innovation" },
        { y: 16.66666666666667, name: "Leadership <br> Behaviours" },
        { y: 16.66666666666667, name: "Continuous Improvement" },
        { y: 16.66666666666667, name: "Employee Engagement" },
        { y: 16.66666666666667, name: "Exceed Customer Expectations"},
        { y: 16.66666666666667, name: "High Reliability" }
    ]
}]
};
$("#chartContainer").CanvasJSChart(options);

}
 </script>

<div id = "chartContainer" style = "height: 100%; width: 100%;"></div>
<script type = "text/javascript" src = "https://canvasjs.com/assets/script/jquery-1.11.1.min.js"></script>  
<script type = "text/javascript" src = "https://canvasjs.com/assets/script/jquery.canvasjs.min.js"></script>

Я бы хотел, чтобы это выглядело так: https://static1.squarespace.com/static/56683787841abadb3a833983/t/5aad434c88251b56303ee2b4/1521304417200/chart.jpg?format=1000w

Как мне вставить html-разрыв «<b r>» в dataPoints и есть ли библиотека диаграмм, которая будет больше похожа на изображение выше?

Спасибо всем за помощь.

При чем здесь java? Java! = JavaScript. Так сказано в подсказках к обоим.

Andreas 20.05.2018 19:57
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
1
1
28
1

Ответы 1

HTML-теги пока не поддерживаются в indexLabels. Однако вы можете использовать indexLabelMaxWidth для достижения того же. Пожалуйста, проверьте код ниже.

var options = {
    exportEnabled: true,
    animationEnabled: true,
    title:{
        text: "Operational Excellence"
    },
    data: [{
        type: "pie",
        showInLegend: false,
        indexLabel: "{name}",
        indexLabelMaxWidth: 100,
        indexLabelPlacement: "inside",
        dataPoints: [
            { y: 16.66666666666667, name: "Innovation" },
            { y: 16.66666666666667, name: "Leadership Behaviours" },
            { y: 16.66666666666667, name: "Continuous Improvement" },
            { y: 16.66666666666667, name: "Employee Engagement" },
            { y: 16.66666666666667, name: "Exceed Customer Expectations"},
            { y: 16.66666666666667, name: "High Reliability" }
        ]
    }]
};

$("#chartContainer").CanvasJSChart(options);
<script type = "text/javascript" src = "https://canvasjs.com/assets/script/jquery-1.11.1.min.js"></script>  
<script type = "text/javascript" src = "https://canvasjs.com/assets/script/jquery.canvasjs.min.js"></script>
<div id = "chartContainer" style = "height: 360px; width: 100%;"></div>

Другие вопросы по теме