如何将图像添加到 High-chart？

Question

我在高图表中绘制了 1000 个多边形系列，但我无法显示所有图例。所以我只想保留四个图例（在对多个多边形系列进行分组之后）并想写下它们的图例。

1. case 1.   Red color box
2. case 2.   Blue color box 
3. case 3.   Green color box
4. case 4.   white color box

但是我怎么能把这个图例放在高图中，因为高图只根据系列数据生成图例。或者我可以添加已经在 highchart 多边形系列 (showinlegend: flase) 中单独生成的静态图像，以便它应该在多边形系列中显示为图例吗？

Answer 1

根据您的要求，如果您只想显示四个不可点击的图例，例如指示器，您可以使用如下所示的渲染器：

function(chart) {
    chart.renderer.rect(80, 75, 10, 10).attr({
    fill: '#C5FFC5',

}).add(); chart.renderer.text("Series 1" ,100, 85).add();
      chart.renderer.rect(80, 95, 10, 10).attr({
    fill: 'red' 
}).add();
    chart.renderer.text("Series 2" ,100, 105).add();
      chart.renderer.rect(80, 115, 10, 10).attr({
    fill: 'green' 

}).add();
chart.renderer.text("Series 3" ,100, 125).add(); 
}

在您的代码中编辑，将此代码放置如下：

    $.getJSON('data10.json', function(data) {
    options.series=data;
    options.chart.zoomType='x'; 
     chart = new Highcharts.Chart(options);
        chart.renderer.rect(80, 75, 10, 10).attr({
            fill: '#C5FFC5',
            stroke: 'black',
                'stroke-width': 1
        }).add();
        chart.renderer.text("Series 1", 100, 85).add();
        chart.renderer.rect(80, 95, 10, 10).attr({
            fill: 'red',
            stroke: 'black',
                'stroke-width': 1
        }).add();
        chart.renderer.text("Series 2", 100, 105).add();
        chart.renderer.rect(80, 115, 10, 10).attr({
            fill: 'green',
            stroke: 'black',
                'stroke-width': 1
        }).add();
        chart.renderer.text("Series 3", 100, 125).add();



});

See the working fiddle here

如何将图像添加到 High-chart？

How to add image to High-chart?

legend

highcharts