Warning: file_get_contents(/data/phpspider/zhask/data//catemap/2/csharp/297.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Javascript 在移动视图中,如何在Highcharts的饼图和legend之间设置换行符?_Javascript_Highcharts_Responsive Design_Pie Chart - Fatal编程技术网

Javascript 在移动视图中,如何在Highcharts的饼图和legend之间设置换行符?

Javascript 在移动视图中,如何在Highcharts的饼图和legend之间设置换行符?,javascript,highcharts,responsive-design,pie-chart,Javascript,Highcharts,Responsive Design,Pie Chart,我一直在寻找解决这个小问题的办法 在大屏幕、中屏幕和小屏幕上,都很不错,就像你们在小提琴上看到的那个样。但我需要一个移动视图解决方案,我想在图形和图例之间提供一个换行符(类似于空白:预换行) 但我不能这样做,因为这是一个svg图像。那么,解决方案是什么 ... legend: { enabled: true, layout: 'vertical', align: 'right',

我一直在寻找解决这个小问题的办法

在大屏幕、中屏幕和小屏幕上,都很不错,就像你们在小提琴上看到的那个样。但我需要一个移动视图解决方案,我想在图形和图例之间提供一个换行符(类似于空白:预换行)

但我不能这样做,因为这是一个svg图像。那么,解决方案是什么

...
legend: {
                enabled: true,
                layout: 'vertical',
                align: 'right',
                width: 400,
                floating: false,
                verticalAlign: 'middle',
                useHTML: true,
                symbolRadius: 0,
                symbolHeight: 0,
                symbolWidth: 0,
                labelFormatter: function () {
                    if (this.name == 'Product') {
                        return '<div class="LegendPieChart-MMS"><span style="float:left;"><span style="color:' + this.color + ';" class="ListItem-MMS">\u25CF</span>' + this.category + '</span><span class="number-piechart" style="float:right">' + this.y + 'K</span></div>';
                    } else if (this.name == 'Competition') {
                        return '<div class="LegendPieChart-MMS LegendPieChartCategory-MMS"><span style="float:left" class="LastValuePieCategory-MMS"><span style="color:' + this.color + ';">\u25CF</span>' + this.category + '</span><span class="number-piechart" style="float:right">' + this.y + 'K</span></div><div class="vertical-divider"></div>';
                    }
                }
            },
...
。。。
图例:{
启用:对,
布局:“垂直”,
对齐:“右”,
宽度:400,
浮动:假,
垂直排列:'中间',
是的,
符号半径:0,
符号高度:0,
符号宽度:0,
labelFormatter:函数(){
如果(this.name=='Product'){
返回'\u25CF'+this.category+''+this.y+'K';
}else if(this.name=='Competition'){
返回'\u25CF'+this.category+''+this.y+'K';
}
}
},
...

小提琴:

像这样:?如您所见,
align
verticalAlign
layout
-需要单独的选项才能在饼图下方显示图例。是的,就是这样,但不是所有屏幕,仅在“XS”(移动视图)上。没有CSS你怎么能做到这一点?这是我的问题。很抱歉我没有解释清楚,我解释起来有些困难。而且完全被破坏了,我的图表也很小!一直使用图表下方的图例如何?您不能为图例设置CSS样式,例如,为图例设置最大高度以启用分页。在您的情况下,还需要禁用
useHTML
。示例:无法使用它,您将看到原因。我将解释这一点与印刷品屏幕了解。我有一些图表,这就是为什么我把它们放在一个物体上,然后把它们放在手风琴上。就像这样:当我打开一个手风琴,那个类别的饼图就会出现。Poduct和竞争,在大屏幕上,很好,这看起来没有问题。中屏幕和小屏幕也一样,这就是为什么我想将图例更改为图形的向下,以便同时查看(饼图和图形),我使用了另一种策略。当我在移动视图上时,使用highcharts上的滑块(flickity)。有可能吗?谢谢