HighCharts在折线图上缺少数据点

时间:2016-03-31 06:47:42

标签: javascript highcharts points

我正在使用高图来绘制数据,而在某些数据系列中,没有数据点,如图像波纹管和jsFiddle示例。在我在github上记录一个问题之前,我想问你是否有一些我想念的东西,或者它确实是一个问题。

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>

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

的Javascript

$(function () {
    $('#container').highcharts({
        chart: {
                type: 'line',
                animation: false
            },
            title: {
                text: "abc"
            },
            xAxis: {
                type: 'datetime',
                dateTimeLabelFormats: { // don't display the dummy year
                    month: '%e. %b',
                    year: '%b'
                }
            },
            yAxis: {
                title: {
                    text: 'Time [ms]'

                },
                labels: {
                    step: 1
                },
                tickInterval: 100,
                minRange: 400
                //range: 200
            },
            plotOptions: {
                line: {
                    dataLabels: {
                        enabled: true,
                        allowOverlap: true,
                        borderWidth: 2,
                        style: {
                            textShadow: false
                        },
                        padding: 2.5
                    },
                    //selected: true,
                    enableMouseTracking: true,
                    animation: false,
                    allowPointSelect: true,
                    /*stacking: 'percent'*/
                },

            },
        series: [{
        "name": "a",
        "data": [[1458604800000, 1800], [1458691200000, 1600], [1458777600000, 1800], [1458864000000, 1800], [1459123200000, 1800], [1459209600000, 1800]],
        "color": "rgba(91,155,213,1)",
        "dataLabels": {"color": "rgba(91,155,213,1)", "y": 0},
        "_symbolIndex": 0
    }, {
        "name": "b",
        "data": [[1458604800000, 1500], [1458691200000, 1500], [1458864000000, 1500], [1459123200000, 1500], [1459209600000, 1500]],
        "color": "rgba(165,165,165,1)",
        "dataLabels": {"color": "rgba(165,165,165,1)", "y": 24},
        "_symbolIndex": 1
    }, {
        "name": "c",
        "data": [[1458604800000, 1400], [1458691200000, 1300], [1458777600000, 1300], [1459123200000, 1100], [1459123200000, 1100], [1459209600000, 1100]],
        "color": "rgba(237,125,49,1)",
        "dataLabels": {"color": "rgba(237,125,49,1)", "y": 0},
        "_symbolIndex": 2
    }]
    });
});

var seriesToReproduce = [{"name":"a","data":[[1458604800000,1800],[1458691200000,1700],[1458777600000,1700],[1458864000000,1700],[1459123200000,1700],[1459209600000,1700]],"color":"rgba(237,125,49,1)","dataLabels":{"color":"rgba(237,125,49,1)","y":0},"_symbolIndex":0},{"name":"b","data":[[1458604800000,2100],[1458691200000,2000],[1458864000000,2100],[1459123200000,2000],[1459123200000,2000],[1459209600000,2000]],"color":"rgba(165,165,165,1)","dataLabels":{"color":"rgba(165,165,165,1)","y":24},"_symbolIndex":1},{"name":"c","data":[[1458604800000,2300],[1458691200000,2200],[1458777600000,2200],[1458864000000,2200],[1459123200000,2200],[1459209600000,2200]],"color":"rgba(91,155,213,1)","dataLabels":{"color":"rgba(91,155,213,1)","y":0},"_symbolIndex":2}]

DEMO

没有数据点截图:http://i.stack.imgur.com/NS8Rl.png

谢谢!

2 个答案:

答案 0 :(得分:3)

您必须深入了解marker series属性的文档才能找到enabled属性,并说:

  

已启用:布尔值

     

启用或禁用点标记。如果为null,则当数据> 0时隐藏标记。密集,并显示更广泛的数据点。默认为null。

所以我不知道他们如何确定数据是否密集,但如果您希望始终显示标记,则应将enabled属性设置为true。

答案 1 :(得分:2)

updated Plunk

在highcharts APi中,可以选择启用标记link

使用

var BookSchema = new Schema({
  _creator : {type: Schema.Types.ObjectId, ref: 'User'},
  title: String,
  subtitle: String,
  author: String,
  language: String,
  pages: Number,
  publisher: String,
  publishedDate: String,
  isbn10: String,
  isbn13: String, 
  description: String,
  dimensions: {
    height: String,
    width: String,
    thickness: String
  },
  category: String,
  rating: String,
  bookType: String,
  imageLinks: {
    extraLarge: String,
    large: String,
    medium: String,
    small: String,
    smallThumbnail: String,
    thumbnail: String,
    uploaded: String   
  },
  uploadedImageLink: String,
  supplierData: {
    mrp: Number,
    supplierPrice: Number,
    quantity: Number
  },
  pricing: {
    salesPrice: Number,
    deliveryCharge: Number
  },
  dateAdded: Date,
  isFeatured: Boolean,
  isBestseller: Boolean
});

用于启用系列中的标记