默认情况下,在amCharts

时间:2015-07-16 20:58:35

标签: javascript json charts amcharts

According to the amCharts documentation, if bulletBorderColor isn't set, it will default to lineColor.这似乎不起作用。我正在为我的团队构建一个主题,因此他们不必担心每次生成图表时都会设置颜色。有没有人有解决方法或解决方案?

CodePen: http://codepen.io/anon/pen/MwByvL

代码:

AmCharts.makeChart("line-chart-fw", {
  "type": "serial",
  "theme": "sailthru",
  "marginTop": 0,
  "marginRight": 0,
  "marginLeft": 0,
  "marginBottom": 0,
  "responsive": {
    "enabled": true
  },
  "pathToImages": "js/amcharts/images/",
  "graphs": [{
    "title": "Yesterday",
    "id": "g2",
    "balloonText": "",
    "type": "smoothedLine",
    "valueField": "value2"
  }, {
    "title": "Today",
    "id": "g1",
    "balloonText": "<b>[[category]]</b><br><span style='font-size:11px;'>Today: [[value]]</span><br><span style='font-size:11px;'>Yesterday: [[value2]]</span>",
    "type": "smoothedLine",
    "valueField": "value"
  }],
  "chartCursor": {
    "valueLineEnabled": false,
    "valueLineBalloonEnabled": false,
    "valueLineAlpha": 0.5,
    "fullWidth": true,
    "categoryBalloonEnabled": false
  },
  "legend": {
    "marginLeft": 0,
    "marginRight": 0,
    "marginTop": 0,
    "marginBottom": 0,
    "width": 140,
    "labelText": "[[title]]",
    "valueText": "",
  },
  "categoryField": "year",
  "categoryAxis": {
    "parseDates": false,
    "minorGridAlpha": 0.1,
    "labelsEnabled": true,
    "inside": false,
  },

  "dataProvider": [{
    "year": "12 AM",
    "value": 5,
    "value2": 10
  }, {
    "year": "1 AM",
    "value": 10,
    "value2": 5
  }, {
    "year": "2 AM",
    "value": 15,
    "value2": 20
  }, {
    "year": "3 AM",
    "value": 5,
    "value2": 10
  }, {
    "year": "4 AM",
    "value": 12,
    "value2": 18
  }, {
    "year": "5 AM",
    "value": 16,
    "value2": 12
  }, {
    "year": "6 AM",
    "value": 7,
    "value2": 5
  }, {
    "year": "7 AM",
    "value": 20,
    "value2": 15
  }, {
    "year": "8 AM",
    "value": 25,
    "value2": 20
  }, {
    "year": "9 AM",
    "value": 20,
    "value2": 15
  }, {
    "year": "10 AM",
    "value": 20,
    "value2": 8
  }, {
    "year": "11 AM",
    "value": 60,
    "value2": 45
  }, {
    "year": "12 PM",
    "value": 80,
    "value2": 70
  }, {
    "year": "1 PM",
    "value": 95,
    "value2": 80
  }, {
    "year": "2 PM",
    "value": 80,
    "value2": 90
  }, {
    "year": "3 PM",
    "value": 40,
    "value2": 50
  }, {
    "year": "4 PM",
    "value": 60,
    "value2": 20
  }, {
    "year": "5 PM",
    "value2": 35
  }, {
    "year": "6 PM",
    "value2": 20
  }, {
    "year": "7 PM",
    "value2": 10
  }, {
    "year": "8 PM",
    "value2": 20
  }, {
    "year": "9 PM",
    "value2": 5
  }, {
    "year": "10 PM",
    "value2": 5
  }, {
    "year": "11 PM",
    "value2": 10

  }],
  "valueAxes": [{
    "axisAlpha": 0,
    "position": "left",
    "labelsEnabled": true,
    "inside": true,
    "ignoreAxisWidth": true,
    "axisTitleOffset": 0,
    "maximum": 100,
  }]

});

1 个答案:

答案 0 :(得分:0)

文档可能不是很简单。技术上,项目符号边框将使用线条的颜色,但前提是您没有使用bulletColor覆盖子弹颜色,而您似乎正在这样做。

要解决此问题,请使用useLineColorForBulletBorder。 (将其设置为true)

因此,主题文件的相关部分应如下所示:

AmGraph: {
    lineAlpha: 1,
    bulletBorderAlpha: 1,
    bulletColor: "#ffffff",
    lineThickness: 1.5,
    fillAlphas: 0.05,
    bulletSize: 6,
    bulletBorderThickness: 1.5,
    bulletColor: "#ffffff",
    bulletBorderAlpha: 1,
    bullet: "round",
    minorGridEnabled: false,
    useLineColorForBulletBorder: true
}

P.S。我注意到你的主题文件中有很多尾随逗号(对象中最后一个属性后面的逗号)。虽然现代浏览器可以处理它,但一些较旧的浏览器会因语法错误而失败。你可能想要修复它。