0

Как построить подобный график?

введите сюда описание изображения

Так чтобы столбцы были помечены, и чтобы "значение 1" и "значение 2" не дублировались... У меня почему-то на графике по два "значение 1" и "значение 2" :

введите сюда описание изображения

Вот код моего графика

Highcharts.chart('container', {
chart: {
    type: 'column',
    backgroundColor: {
        linearGradient: [0, 0, 500, 500],
        stops: [
            [0, '#1b2a47'],
            [1, '#1b2a47']
        ]
    },

},
title: {
    text: "Новые заявки",
    style: {
        color: '#fff',
        font: 'bold 16px "Trebuchet MS", Verdana, sans-serif'
    }
},
subtitle: {
    text: 'Source: WorldClimate.com',
    style: {
        color: '#fff',
        font: 'bold 12px "Trebuchet MS", Verdana, sans-serif'
    }
},
legend: {
    itemStyle: {
        font: '9pt Trebuchet MS, Verdana, sans-serif',
        color: 'white'
    },
    itemHoverStyle: {
        color: 'gray'
    }
},
color: {
    linearGradient: {x1: 0, x2: 0, y1: 0, y2: 1},
    stops: [
        [0, '#003399'],
        [1, '#3366AA']
    ]
},
xAxis: {
    gridLineWidth: 1,
    lineColor: '#ffffff',
    tickColor: '#ffffff',
    labels: {
        style: {
            color: '#ffb606',
            font: '11px Trebuchet MS, Verdana, sans-serif'
        }
    },
    title: {
        style: {
            color: '#ffffff',
            fontWeight: 'bold',
            fontSize: '12px',
            fontFamily: 'Trebuchet MS, Verdana, sans-serif'
        }
    },
    categories: ['Январь', 'Февраль', 'Март', 'Апрель', 'Май', 'Июнь', 'Июль', 'Август', 'Сентябрь', 'Октябрь', 'Ноябрь', 'Декабрь',]
},

yAxis: {
    lineColor: '#ffffff',
    tickColor: '#ffffff',
    labels: {
        style: {
            color: '#ffb606',
            font: '11px Trebuchet MS, Verdana, sans-serif'
        }
    },
    title: {
        text: 'Количество заявок',
        style: {
            color: '#8bc34a',
            fontSize: '12px',
            fontFamily: 'Trebuchet MS, Verdana, sans-serif'
        }
    },

    stackLabels: {
        enabled: true,
        align: 'center',
        formatter: function () {
            console.log(this.points)
            return 'Тут должно быть - в первом столбике "myData1" а во втором "myData2"' +'<br/>Всего: '  + this.total;
            //Make your changes here to reflect your output. This is just a sample code
        },
        style: {
            fontWeight: 'normal',
            color: ( // theme
                Highcharts.defaultOptions.title.style &&
                Highcharts.defaultOptions.title.style.color
            ) || '#ffb606',
        }
    },
    allowDecimals: false,
    min: 0,
},
tooltip: {
    headerFormat: '<b>{point.x}</b><br/>',
    pointFormat: '{series.name}: {point.y}<br/>Total: {point.stackTotal}',
    formatter: function () {
        return '<b>' + this.x + '</b><br/>' +
            this.series.name + ': ' + this.y + '<br/>' +
            'Total: ' + this.point.stackTotal;
    }
},
plotOptions: {
    column: {
        stacking: 'normal',
        dataLabels: {
            enabled: true,
            crop: false,
            overflow: 'none',
        }
    }
},
series: [{
    "name": "Значение 1",
    "data": [
        {"y": 1,
            "myData": "myData1",
            "myOtherData": "myOtherData2"
        },
        {
            "y": 2,
            "myData": "myData1",
            "myOtherData": "myOtherData2"
        }
    ],
    "stack": "1"
}, {
    "name": "Значение 2",
    "data": [
        {
            "y": 3,
            "myData": "myData2",
            "myOtherData": "myOtherData1"
        },
        {
            "y": 4,
            "myData": "myData2",
            "myOtherData": "myOtherData2"
        }
    ],
    "stack": "2"
}, {
    "name": "Значение 1",
    "data": [
        {
            "y": 5,
            "myData": "myData1",
            "myOtherData": "myOtherData1"
        },
        {
            "y": 6,
            "myData": "myData1",
            "myOtherData": "myOtherData1"
        }
    ],
    "stack": "1"
}, {
    "name": "Значение 2",
    "data": [
        {
            "y": 7,
            "myData": "myData2",
            "myOtherData": "myOtherData2"
        },
        {
            "y": 8,
            "myData": "myData2",
            "myOtherData": "myOtherData2"
        }
    ],
    "stack": "2"
}]

});

3
  • Вопросы с просьбами помочь с отладкой («почему этот код не работает?») должны включать желаемое поведение, конкретную проблему или ошибку и минимальный код для её воспроизведения прямо в вопросе.
    – Kromster
    Commented 20 сент. 2022 в 10:46
  • Так в том то и дело, что код корявый на столько, что его даже стыдно сюда вписывать) Нужно получить график, как на первой картинке. И вот пытаюсь разобраться, как его создать...
    – FotoCross
    Commented 21 сент. 2022 в 3:38
  • Вот мой код: codepen.io/verbalexvlad/pen/KKRqjXX
    – FotoCross
    Commented 21 сент. 2022 в 3:48

1 ответ 1

1

Если бы была только одна колонка на месяц, все бы работало штатно. В Вашем случае скорее всего придется идти на хитрость, но почти средствами библиотеки. Причина в том что колонки в стеке разных цветов по-умолчанию, однако принудительно им можно задать через атрибут color на уровне данных. Но и в этом случае легенда помнит оригинальные цвета, их там тоже можно переопределить через тот же атрибут на уровне стэка, ну а для того чтобы названия не двоились, троились и т.д их нужно будет забить "", но оставить в специальном массиве legendColors:

 [
    {
        "name": "Значение 1",
        color: '#7db4ec',
        "stack": "1"
    },
    {
        "name": "Значение 2",
        color: '#43424a',
        "stack": "2"
    }
 ]

который нужно будет примешивать к данным,

 series: [
    ...legendColors,   
    {

он будет отвечать за то что будет отображаться в легенде - может есть способ проще но я его пока не нашел.

const legendColors = [{
        "name": "Значение 1",
        color: '#7db4ec',
        "stack": "1"
    },
    {
        "name": "Значение 2",
        color: '#43424a',
        "stack": "2"
    }]

Highcharts.chart('container', {
    chart: {
        type: 'column',
        backgroundColor: {
            linearGradient: [0, 0, 500, 500],
            stops: [
                [0, '#1b2a47'],
                [1, '#1b2a47']
            ]
        },

    },
    title: {
        text: "Новые заявки",
        style: {
            color: '#fff',
            font: 'bold 16px "Trebuchet MS", Verdana, sans-serif'
        }
    },
    subtitle: {
        text: 'Source: WorldClimate.com',
        style: {
            color: '#fff',
            font: 'bold 12px "Trebuchet MS", Verdana, sans-serif'
        }
    },
    legend: {
        itemStyle: {
            font: '9pt Trebuchet MS, Verdana, sans-serif',
            color: 'white'
        },
        itemHoverStyle: {
            color: 'gray'
        }
    },
    color: {
        linearGradient: {x1: 0, x2: 0, y1: 0, y2: 1},
        stops: [
            [0, '#003399'],
            [1, '#3366AA']
        ]
    },
    xAxis: {
        gridLineWidth: 1,
        lineColor: '#ffffff',
        tickColor: '#ffffff',
        labels: {
            style: {
                color: '#ffb606',
                font: '11px Trebuchet MS, Verdana, sans-serif'
            }
        },
        title: {
            style: {
                color: '#ffffff',
                fontWeight: 'bold',
                fontSize: '12px',
                fontFamily: 'Trebuchet MS, Verdana, sans-serif'
            }
        },
        categories: ['Январь', 'Февраль', 'Март', 'Апрель', 'Май', 'Июнь', 'Июль', 'Август', 'Сентябрь', 'Октябрь', 'Ноябрь', 'Декабрь',]
    },

    yAxis: {
        lineColor: '#ffffff',
        tickColor: '#ffffff',
        labels: {
            style: {
                color: '#ffb606',
                font: '11px Trebuchet MS, Verdana, sans-serif'
            }
        },
        title: {
            text: 'Количество заявок',
            style: {
                color: '#8bc34a',
                fontSize: '12px',
                fontFamily: 'Trebuchet MS, Verdana, sans-serif'
            }
        },

        stackLabels: {
            enabled: true,
            align: 'center',
            formatter: function () {
                console.log(this.points)
                return 'Тут должно быть - ' +'<br/>'  + 'в первом столбике "myData1",' +'<br/>'  + ' а во втором "myData2"' +'<br/>Всего: '  + this.total;
                //Make your changes here to reflect your output. This is just a sample code
            },
            style: {
                fontWeight: 'normal',
                color: ( // theme
                    Highcharts.defaultOptions.title.style &&
                    Highcharts.defaultOptions.title.style.color
                ) || '#ffb606',
            }
        },
        allowDecimals: false,
        min: 0,
    },
    tooltip: {
        headerFormat: '<b>{point.x}</b><br/>',
        pointFormat: '{series.name}: {point.y}<br/>Total: {point.stackTotal}',
        formatter: function () {
            return '<b>' + this.x + '</b><br/>' +
                this.series.name + ': ' + this.y + '<br/>' +
                'Total: ' + this.point.stackTotal;
        }
    },
    plotOptions: {
        column: {
            stacking: 'normal',
            dataLabels: {
                enabled: true,
                crop: false,
                overflow: 'none',
            }
        }
    },
    series: [
    ...legendColors,   
    {
        "name": "",
        "data": [
            {"y": 1,
                "myData": "myData1",
                "myOtherData": "myOtherData2",
                color: '#7db4ec',
            },
            {
                "y": 2,
                "myData": "myData1",
                "myOtherData": "myOtherData2",
                color: '#7db4ec',
            },
            ],
        color: 'transparent',
        "stack": "1"
    }, {
        "name": "",
        "data": [
            {
                "y": 3,
                "myData": "myData1",
                "myOtherData": "myOtherData1",
                color: '#43424a',
            },
            {
                "y": 4,
                "myData": "myData1",
                "myOtherData": "myOtherData1",
                color: '#43424a',
            },
  
        ],
        color: 'transparent',
        "stack": "1"
    }, 
    {
        "name": "",
        "data": [
            {   "y": 5,
                "myData": "myData1",
                "myOtherData": "myOtherData2",
                color: '#7db4ec',
            },
            {
                "y": 6,
                "myData": "myData1",
                "myOtherData": "myOtherData2",
                color: '#7db4ec',
            },
        ],
        color: 'transparent',
        "stack": "2"
    }, {
        "name": "",
        "data": [
            {
                "y": 7,
                "myData": "myData1",
                "myOtherData": "myOtherData1",
                color: '#43424a',

            },
            {
                "y": 8,
                "myData": "myData1",
                "myOtherData": "myOtherData1",
                color: '#43424a',
            },
        ],
        color: 'transparent',
        "stack": "2"
    }, 
    ]
});
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/highcharts-more.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/export-data.js"></script>
<script src="https://code.highcharts.com/modules/accessibility.js"></script>
<figure class="container-fluid highcharts-figure">
    <div id="container"></div>
</figure>
</body>
</html>

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.