Хобрук: Ваш путь к мастерству в программировании

Добавление текста на круговую диаграмму вручную

3 среза в моей круговой диаграмме относятся к одной категории. Это серые ломтики (174, 29, 234). Можно ли наложить текст на обложку на все 3 слайса. Можно ли повернуть или изогнуть оверлейный текст, чтобы покрыть серые фрагменты.

Вот моя рабочая скрипка: https://jsfiddle.net/1h8p257c/

Highcharts.chart('container', {
    chart: {
        plotBackgroundColor: null,
        plotBorderWidth: null,
        plotShadow: false,
        type: 'pie'
    },
    title: {
        text: 'Types of Actions'
},
    subtitle: {
        text: 'October 31, 2018'
    },
    tooltip: {
        pointFormat: '{series.name}: <b>{point.y}</b>'
    },
    plotOptions: {
        pie: {
            size:230,
            allowPointSelect: true,
            cursor: 'pointer',
            dataLabels: {
                enabled: true,
                distance: -50,
                format: '{point.y:f}',
                color:'black'
            },
            showInLegend: true
        }
    },
    legend: {
      align: 'left',
      verticalAlign: 'middle',
      layout:'vertical'
    },
    series: [{
        name: 'Types',
        colorByPoint: true,
        data: [{
            name: 'Consent Order 1',
            y: 234,
            color:'#808080',
            legendIndex: 1
        }, {
            name: 'Consent Order 2',
            y: 29,
            color:'#C0C0C0',
            legendIndex: 2
        }, {
            name: 'Consent Order 3',
            y: 174,
            color:'#DCDCDC',
            legendIndex: 3
        },{
            name: 'Not Likely',
            y: 165,
            color:'#1E90FF',
            legendIndex: 4
        }, {
            name: 'No Testing',
            y: 2,
            color:'#FF0000',
            legendIndex: 5
                }]
    }]
});
javascript highcharts
01.11.2018

  • Пожалуйста, предоставьте то, что у вас есть до сих пор с точки зрения кода 02.11.2018

Ответы:


1

Если они все из одной категории, почему бы просто не объединить их вот так:

Highcharts.chart('container', {
    chart: {
        plotBackgroundColor: null,
        plotBorderWidth: null,
        plotShadow: false,
        type: 'pie'
    },
    title: {
        text: 'Types of Actions'
},
    subtitle: {
        text: 'October 31, 2018'
    },
    tooltip: {
        pointFormat: '{series.name}: <b>{point.y}</b>'
    },
    plotOptions: {
        pie: {
            size:230,
            allowPointSelect: true,
            cursor: 'pointer',
            dataLabels: {
                enabled: true,
                distance: -50,
                format: '{point.y:f}',
                color:'black'
            },
            showInLegend: true
        }
    },
    legend: {
      align: 'left',
      verticalAlign: 'middle',
      layout:'vertical'
    },
    series: [{
        name: 'Types',
        colorByPoint: true,
        data: [{
            name: 'Consent Order 1 - 3',
            y: 437,
            color:'#808080',
            legendIndex: 1
        }, {
            name: 'Not Likely',
            y: 165,
            color:'#1E90FF',
            legendIndex: 4
        }, {
            name: 'No Testing',
            y: 2,
            color:'#FF0000',
            legendIndex: 5
				}]
    }]
});
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://codehighcharts/modules/exporting.js"></script>
<script src="https://codehighcharts/modules/data.js"></script>
<script src="https://codehighcharts/modules/drilldown.js"></script>
<script src="https://codehighcharts/modules/export-data.js"></script>

<div id="container"></div>

Или разница имеет значение?

01.11.2018

2

Вы можете использовать Highcharts.SVGRenderer, чтобы добавить дополнительный текст на диаграмму:

    events: {
        load: function(){
            var center = this.series[0].points[2].shapeArgs;

            this.renderer.text(
                'someText', 
                center.x + this.plotLeft - 20, 
                center.y + this.plotTop + 50
            ).attr({
                fill: 'red',
                'font-size': '20px',
                rotation: -45,
                zIndex: 10
            })
            .add();
        }
    }

Демонстрация в реальном времени: https://jsfiddle.net/BlackLabel/t04gqy2h/

API: https://api.highcharts.com/class-reference/Highcharts.SVGRenderer#text

02.11.2018
Новые материалы
Создание кнопочного меню с использованием HTML, CSS и JavaScript
Вы будете создавать кнопочное меню, которое имеет состояние наведения, а также позволяет вам выбирать кнопку при нажатии на нее. Финальный проект можно увидеть в этом Codepen . Шаг 1..
Внедрите OAuth в свои веб-приложения для повышения безопасности
OAuth — это широко распространенный стандарт авторизации, который позволяет приложениям получать доступ к ресурсам от имени пользователя, не раскрывая его пароль. Это позволяет пользователям..
Классы в JavaScript
class является образцом java Script Object. Конструкция «class» позволяет определять классы на основе прототипов с чистым, красивым синтаксисом. // define class Human class Human {..
Как свинг-трейдеры могут использовать ИИ для больших выигрышей
По мере того как все больше и больше профессиональных трейдеров и активных розничных трейдеров узнают о возможностях, которые предоставляет искусственный интеллект и машинное обучение для улучшения..
Как построить любой стол
Я разработчик программного обеспечения. Я люблю делать вещи и всегда любил. Для меня программирование всегда было способом создавать вещи, используя только компьютер и мое воображение...
Обзор: Машинное обучение: классификация
Только что закончил третий курс курса 4 часть специализации по машинному обучению . Как и второй курс, он был посвящен низкоуровневой работе алгоритмов машинного обучения. Что касается..
Разработка расширений Qlik Sense с qExt
Использование современных инструментов веб-разработки для разработки крутых расширений Вы когда-нибудь хотели кнопку для установки переменной в приложении Qlik Sense? Когда-нибудь просили..