将系列标记添加到highcharts区域图表

时间:2013-12-07 22:46:36

标签: json highcharts

我正在尝试根据时间轴创建区域图表,一切正常,直到我添加series marker。我尝试了一些不同的模式,但无法使用标记来渲染图表。

尝试1:将[x,y]项替换为[{x,y,marker}]对象

data: [[1384219800000,2],
[{x:1384269600000,y:7,marker:{symbol:"url(http://www.highcharts.com/demo/gfx/sun.png)"}}],
[1384279900000,1]]

尝试2:将[x,y]项替换为[x, {y,marker}]对象

data: [[1384219800000,2],
[1384269600000, {y:7,marker:{symbol:"url(http://www.highcharts.com/demo/gfx/sun.png)"}}],
[1384279900000,1]]

这是没有标记的工作区域图表。这会呈现正常,直到我尝试添加标记符号

$(function () {
        $('#container').highcharts({
                            chart: {
                    type: 'area'
                },
                title: {
                    style: {
                        display: 'none'
                    }
                },
                subtitle: {
                    style: {
                        display: 'none'
                    }
                },
                credits: {
                    enabled: false
                },
                xAxis: {
                    type: 'datetime'
                },
                yAxis: {
                    title: {
                        text: ''
                    },
                    min: 0,
                    minorGridLineWidth: 0,
                    gridLineWidth: 0,
                    alternateGridColor: null
                },
                legend: {
                    borderWidth: 0,
                    enabled: true,
                    align: 'right',
                    verticalAlign: 'top',
                    x: -5,
                    y: -15,
                    floating: true
                },
                plotOptions: {
                    area: {
                        stacking: 'normal',
                        lineColor: '#666666',
                        lineWidth: 1,
                        marker: {
                            lineWidth: 0,
                            lineColor: '#666666',
                            enabled: false
                        }
                    }
                },
                series:
                [{
                    name: 'Items',
                    color: '#3399CC',
                    data: [[1384219800000,2],[1384269600000,7],[1384279900000,1]]
                }],
                navigation:
                {
                    menuItemStyle: {
                        fontSize: '10px'
                    }
                },
                navigator: {
                    enabled: true
                },
                scrollbar: {
                    enabled: false
                },
                rangeSelector: {
                    enabled: false
                }
        });
    });

1 个答案:

答案 0 :(得分:5)

您的第一个语法接近正确,除非您需要将[]放在{}周围并启用该特定点的标记:

data: [
  [1384219800000,2],
  {
    x:1384269600000,
    y:7,
    marker:{
      enabled: true, 
      symbol:"url(http://www.highcharts.com/demo/gfx/sun.png)"
    }
   },
   [1384279900000,1]
]

小提琴here