如何删除高图区域中单点周围的笔画。高图

时间:2019-04-15 18:58:55

标签: highcharts

我在海图上以图表类型=“ area”绘制了单点数据。 这是代码:

                    xtype: 'container',
                    ref: 'chartContainer',
                    height: 170,
                    layout: {
                        type: 'hbox',
                        align: 'stretch'
                    },
                    items: [{
                        xtype: 'qxhighchart',
                        ref: '../confirmedChart',
                        cls: 'qx-highchart-ct severity-chart',
                        flex: 1,
                        showLegend: true,
                        chartConfig: Qx.chart.Highchart.Configs.get('area', 
                         {

                            xAxis: {
                                 labels: {
                                     formatter: function () {
                                         return this.value; 
                                     }
                                 }
                             },
                             yAxis: {
                                 labels: {
                                     formatter: function () {
                                         return this.value;
                                     }
                                 }
                             },
                            plotOptions: {
                              area: {
                                  marker: {
                                      enabled: true,
                                      states: {
                                          hover: {
                                              enabled: true
                                          }
                                      }
                                  }
                              },
                                series: {
                                    allowPointSelect: true,
                                    shadow: false,
                                    dataLabels: {
                                      enabled: false
                                    },
                                    marker: {
                                      states: {
                                        select: {
                                          fillColor: "#FFFFFF",
                                          radius: 5,
                                          lineColor: null
                                        }
                                      }
                                    }
                                  }
                            },
                                series: [{
                                        name: "A",
                                        id: "a",
                                        type: 'area',
                                        color: '#d5bcfc',
                                        lineColor: '#d5bcfc'
                                    },{
                                          name: "B",
                                          id: "b",
                                          type: 'area',
                                          color: '#5da7e3',
                                          lineColor: '#5da7e3'
                                      }]

                        })
     }]

附件的输出:

enter image description here

如您所见,我在单个点周围得到了蓝色的笔画填充。我想摆脱它们。从上面的代码中,我尝试删除一些属性,但这没有帮助。 这就是我期望的所有圆形状的单点外观,如下所示

enter image description here

关于如何从点中删除边框的任何想法?

1 个答案:

答案 0 :(得分:1)

您可以通过设置plotOptions.series.marker.lineWidth = 0来删除边框(描边)。要将所有点更改为圆形,请设置plotOptions.series.marker.symbol = 'circle'

代码:

plotOptions: {
  series: {
    marker: {
      lineColor: null,
      lineWidth: 0,
      symbol: 'circle'
    }
  }
}

演示:

API参考: