在图表上隐藏highcharts系列名称

时间：2018-04-13 17:25:28

标签： graph highcharts legend series display

我正在搞乱公司项目的高级图表，并且我在传奇中显示了计算（总计）中的名称/编号。问题是它们也显示在图表上。我不能为我的生活找出如何在图表上关闭它们，但在传奇中留下它们。我已经阅读了API，也许我错过了它，但是如果你们都不介意的话可以使用一些帮助。

代码：

 Highcharts.chart('high_charts_admin', {
    title: {
        text: 'Adset ID: '+results[1].data[0].adset_id,
    },

    subtitle: {
        text: 'Campaign Name: '+results[1].data[0].campaign_name, 
    },

    yAxis: {
        title: {
            text: ''
        }
    },
    xAxis: {
        title: {
            text: 'Day of the Campaign',
        }, 
        //type: 'datetime', 
        categories: results[0][8]
    },
    legend: {
        //labelFormatter: function() {
        //    return '<span style="color: '+this.color+'">'+ this.name + '</span>';
        //  },
        layout: 'vertical',
        align: 'right',
        verticalAlign: 'middle',
        itemWidth: 250,
        itemStyle: {
            fontSize: '16px',
            color: 'black'
         },
         itemMarginTop: 12,
         itemMarginBottom: 12,
         squareSymbol: true,
         symbolHeight: 25,
         symbolWidth: 30,
         symbolRadius: 100,
    },
    chart: {
        marginRight: 300,
    },

    plotOptions: {
        series: {
            label: {
                connectorAllowed: false
            },
            pointStart: 0,
            type: 'series',
            //showInLegend: false,
        }
    },        
    series: [{
        name: 'Results: '+results[2][0],
        data: results[0][0],
        type: 'spline',
        marker: {
            radius: 2
        },
    }, {
        name: 'Reach: '+results[2][1],
        data: results[0][1],
        type: 'spline',
        marker: {
            radius: 2
        },
    }, {
        name: 'Impressions: '+results[2][2],
        data: results[0][2],
        type: 'spline',
        marker: {
            radius: 2
        },
    }, { 
        name: 'Cost Per Lead: '+results[2][3],
        data: results[0][3],
        type: 'spline',
        marker: {
            radius: 2
        },
    }, {
        name: 'Spend: '+results[2][4],
        data: results[0][4],
        type: 'spline',
        marker: {
            radius: 2
        },
    }, {
        name: 'CTR (All): '+results[2][5],
        data: results[0][5],
        type: 'spline',
        marker: {
            radius: 2
        },
    }, {
        name: 'CPC (All): '+results[2][6],
        data: results[0][6],
        type: 'spline',
        marker: {
            radius: 2
        },
    }, {
        name: 'Clicks: '+results[2][7],
        data: results[0][7],
        type: 'spline',
        marker: {
            radius: 2
        },
    }],
    responsive: {
        rules: [{
            condition: {
                maxWidth: 500
            },
            chartOptions: {
                 legend: {
                 layout: 'horizontal',
                     align: 'center',
                     verticalAlign: 'bottom'
                 }
            }
        }]
    }
});

这是我的代码：

    Highcharts.chart('high_charts_admin', {
    title: {
        text: 'Adset ID: '+results[1].data[0].adset_id,
    },

    subtitle: {
        text: 'Campaign Name: '+results[1].data[0].campaign_name, 
    },

    yAxis: {
        title: {
            text: ''
        }
    },
    xAxis: {
        title: {
            text: 'Day of the Campaign',
        }, 
        //type: 'datetime', 
        categories: results[0][8]
    },
    legend: {
        //labelFormatter: function() {
        //    return '<span style="color: '+this.color+'">'+ this.name + '</span>';
        //  },
        layout: 'vertical',
        align: 'right',
        verticalAlign: 'middle',
        itemWidth: 250,
        itemStyle: {
            fontSize: '16px',
            color: 'black'
         },
         itemMarginTop: 12,
         itemMarginBottom: 12,
         squareSymbol: true,
         symbolHeight: 25,
         symbolWidth: 30,
         symbolRadius: 100,
    },
    chart: {
        marginRight: 300,
    },

    plotOptions: {
        series: {
            label: {
                connectorAllowed: false
            },
            pointStart: 0,
            type: 'series',
            //showInLegend: false,
        }
    },        
    series: [{
        name: 'Results: '+results[2][0],
        data: results[0][0],
        type: 'spline',
        marker: {
            radius: 2
        },
    }, {
        name: 'Reach: '+results[2][1],
        data: results[0][1],
        type: 'spline',
        marker: {
            radius: 2
        },
    }, {
        name: 'Impressions: '+results[2][2],
        data: results[0][2],
        type: 'spline',
        marker: {
            radius: 2
        },
    }, { 
        name: 'Cost Per Lead: '+results[2][3],
        data: results[0][3],
        type: 'spline',
        marker: {
            radius: 2
        },
    }, {
        name: 'Spend: '+results[2][4],
        data: results[0][4],
        type: 'spline',
        marker: {
            radius: 2
        },
    }, {
        name: 'CTR (All): '+results[2][5],
        data: results[0][5],
        type: 'spline',
        marker: {
            radius: 2
        },
    }, {
        name: 'CPC (All): '+results[2][6],
        data: results[0][6],
        type: 'spline',
        marker: {
            radius: 2
        },
    }, {
        name: 'Clicks: '+results[2][7],
        data: results[0][7],
        type: 'spline',
        marker: {
            radius: 2
        },
    }],
    responsive: {
        rules: [{
            condition: {
                maxWidth: 500
            },
            chartOptions: {
                 legend: {
                 layout: 'horizontal',
                     align: 'center',
                     verticalAlign: 'bottom'
                 }
            }
        }]
    }
});

2 个答案:

答案 0 :(得分：0)

您已在系列名称中添加了总价值

name: 'Results: '+results[2][0],

所以它在图表和图例中都显示出来。

而不是这个，你应该使用系列定义中的自定义参数，如

  series: [{
    name: 'Results1',
    data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4],
    total: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4].reduce((tot,num)=>{return tot+num}),
    type: 'spline',
    marker: {
      radius: 5
    }
  }]

上面我添加了total param系列，然后我会使用labelFormatter来显示图例中的总值。

  legend: {
    labelFormatter: function() {
      return this.userOptions.name + ': ' + this.userOptions.total
    },
  },


Highcharts.chart('container', {


  xAxis: {
    categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
  },
  legend: {
    labelFormatter: function() {
      return this.userOptions.name + ': ' + this.userOptions.total
    },
  },

  plotOptions: {
    spline: {
      marker: {
        enabled: true
      }
    }
  },
  series: [{
    name: 'Results1',
    data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4],
    total: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4].reduce((tot, num) => {
      return tot + num
    }),
    type: 'spline',
    marker: {
      radius: 5
    },
  }, {
    name: 'Results2',
    data: [194.1, 95.6, 54.4, 29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 116.4],
    total: [194.1, 95.6, 54.4, 29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 116.4].reduce((tot, num) => {
      return tot + num
    }),
    type: 'spline',
    marker: {
      radius: 5
    },
  }]
});
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/series-label.js"></script>
<div id="container" style="height: 400px"></div>

Fiddle演示

答案 1 :(得分：0)

我认为从HTML文档中删除系列标签模块脚本是您所需要的解决方案。

<script src="https://code.highcharts.com/highcharts.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>

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

演示：https://jsfiddle.net/BlackLabel/f6rya8k3/

API：https://api.highcharts.com/highcharts/plotOptions.series.label

相关问题
最新问题