Series markers disable on lines and enable on lege

2019-06-19 18:39发布

站内问答 / 后端开发
809 2 6

I have a line chart in Highchart with more than 10 series. When the chart is plotted for more that 2 months data with series marker enabled, the chart looks congested and makes no sense so I disabled series markers. When series marker is disabled, the markers in the legends also disappeared. What I want is to disable the markers only in the series and enable markers in legends. How can I achieve this? Can anybody please help me this?

Thanks, Rocky.

标签： highcharts
举报
2条回答
Viruses.
2楼-- · 2019-06-19 19:12

You have two options:

  • enable marker for whole series, but disable for each point
  • use two series, one for data, one for legend and link them together by ID

Example:

var chart = new Highcharts.Chart({
    chart: {
        renderTo: 'container'
    },
    plotOptions: {
        series: { 
            marker: {
                enabled: false
            }
        }
    },
    series: [{
        data: [],
        name: 'test',
        id: 'id-1',
        color: 'red',
        marker: {
            enabled: true
        }
    }, {
        linkedTo: 'id-1',
        color: 'red',
        data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0]        
    }]
});
查看更多
0人赞 添加讨论(0) 举报
看我几分像从前
3楼-- · 2019-06-19 19:13

you can do something like this

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
</head>
<body>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    <script src="https://code.highcharts.com/stock/highstock.js"></script>
    <script src="https://code.highcharts.com/stock/modules/exporting.js"></script>

    <div id="container" style="height: 400px; min-width: 310px"></div>


</body>
</html>
<script type="text/javascript">
    $(function () {

        Highcharts.Series.prototype.drawPoints = function () { };

        $('#container').highcharts('StockChart', {

            title: {
                text: 'This is yongjing.chen test 3'
            },
            legend: { enabled: true, symbolWidth: 50 },

            plotOptions: {
                series: {
                    marker: {
                        enabled: true, radius: 6, symbol: 'square'
                    }
                }
            },
            series: [{
                data: [1, 171.5, 306.4, 2.2, 300, 2, 200],
                name: 'CPU',
                id: 'id-1',
                color: 'red'
            }]

        });
    });
</script>

查看更多
0人赞 添加讨论(0) 举报
登录 后发表回答
相关问题
查看全部
相关文章
查看全部
收藏的人(6)