如何在highcharts中制作正方形和水平线?

时间:2018-05-08 15:26:56

标签: javascript highcharts

需要帮助highchartsJs。我需要截图上的图表。对于我找到this的行,但不完全是我需要的行。对于广场,我没有任何想法。广场是最重要的。
任何帮助将不胜感激。谢谢。
square
horizontal lines

1 个答案:

答案 0 :(得分:0)

如果有人需要this之类的东西 https://jsfiddle.net/gdgb941o/20/

chart: {
                type: 'column'
            },
            title: {
                text: false
            },
            tooltip: {
                enabled: false
            },
            credits: {
                enabled: false
            },

            xAxis: {
                tickWidth: 0,
                lineWidth: 0,
                type: 'category',
                gridLineWidth: 0
            },
            yAxis: {
                lineWidth: 0,
                gridLineWidth: 0,
                labels: {
                    enabled: false
                },
                max: 100,
                title: {
                    text: false
                }
            },
            navigation: {
                buttonOptions: {
                    enabled: false
                }
            },
            legend: {
                enabled: false
            },
            plotOptions: {
                column: {
                    borderWidth: 0,
                    grouping: false
                },
                series: {

                }

            },

            series: [{

                data: [{
                    borderWidth: 2,
                    borderColor:'#41bc9b',
                    color: 'white',
                    name: 'Yes',
                    y: 100,
                    dataLabels: {
                        formatter: function() {
                            return "33" + "%"
                        },
                        enabled: true,
                        inside: true,
                        align: 'center',
                        color: 'black',
                        style: {
                            fontSize: 20,
                            textOutline: false
                        }

                    }
                }, {
                    borderWidth: 2,
                    borderColor:'#41bc9b',
                    color: 'white',
                    name: 'The email did not come',
                    y: 100,
                    dataLabels: {
                        formatter: function() {
                            return "80" + "%"
                        },
                        enabled: true,
                        inside: true,
                        align: 'center',
                        color: 'black',
                        style: {
                            fontSize: 20,
                            textOutline: false
                        }

                    }

                }, {
                    borderWidth: 2,
                    borderColor:'#41bc9b',
                    color: 'white',
                    name: 'Error in verification',
                    y: 100,
                    dataLabels: {
                        formatter: function() {
                            return "55" + "%"
                        },
                        enabled: true,
                        inside: true,
                        align: 'center',
                        color: 'black',
                        style: {
                            fontSize: 20,
                            textOutline: false
                        }

                    }
                },
                    {
                        borderWidth: 2,
                        borderColor:'#41bc9b',
                        color: 'white',
                        name: 'No',
                        y: 100,
                        dataLabels: {
                            formatter: function() {
                                return "20" + "%"
                            },
                            enabled: true,
                            inside: true,
                            align: 'center',
                            color: 'black',
                            style: {
                                fontSize: 20,
                                textOutline: false
                            }

                        }
                    }]
            }, {

                pointPadding: 0.125,
                data: [{
                    color: '#41bc9b',
                    name: 'Yes',
                    y: 33

                }, {
                    color: '#41bc9b',
                    name: 'The email did not come',
                    y: 80
                }, {
                    color: '#41bc9b',
                    name: 'Error in verification',
                    y: 55
                },
                    {
                        color: '#41bc9b',
                        name: 'No',
                        y: 20
                    }]
            }]