跨平台图表控件Anychart常见问题集锦(二):如何删除列边框?

原创|其它|编辑:吴园园|2019-10-14 09:53:41.000|阅读 23 次

概述:本文介绍了用户在使用Anychart经常遇见的问题,希望对您有所帮助~

AnyChart是基于JavaScript (HTML5) 的图表控件。使用AnyChart控件,可创建跨浏览器和跨平台的交互式图表和仪表。AnyChart 图表目前已被很多知名大公司所使用,可用于仪表盘、报表、数据分析、统计学、金融等领域。重要推荐:AnyChart已加入在线订购,超值特惠限时抢购!咨询详情>>

AnyChart现已更新至最新版本8.7.0,九大数据可视化新功能上线,改进了功能并修复了一些bug。新版本,新功能,赶快下载体验吧~(点击查看更新详情

点击下载AnyChart最新试用版

Q:如何删除列(条形,区域)边框?

A:要从JavaScript区域图或JavaScript饼图或其他AnyChart图表类型中删除项目边框,您需要使用以下代码禁用笔划: series.stroke(null); 就像示例中所示。  

HTML

<div id="container"></div>

CSS

html, body, #container {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
}

JavaScript

anychart.onDocumentReady(function() {
  // create area chart
  chart = anychart.area();
  // create area series with passed data
  var series = chart.area([
    ['P1' , 162],
    ['P2' , 134],
    ['P3' , 116]
  ]);
  // remove area border
  series.stroke(null);
  // set yScale minimum to 0
  chart.yScale().minimum(0);
  
  // draw
  chart.container('container').draw();
});

Q:如何使用JSON格式创建具有多个系列的图表?

A:JSON数据集可以包含一个或多个系列-几乎与您在JavaScript中执行此操作的方式相同。使用JSON格式设置数据与JavaScript中设置数据的方式非常相似。JSON配置中每个对象的名称都与JavaScript中的方法或参数的名称相对应。因此,要创建(例如,使用JSON的线系列),应使用以下代码:

"seriesType": "line":
"series": [{  //series type  "seriesType": "line"
  //series data
  "data": [
    {"x": "P1", "value": "128.14"},
    {"x": "P2", "value": "112.61"},
    {"x": "P3", "value": "163.21"},
    {"x": "P4", "value": "229.98"},
    {"x": "P5", "value": "90.54"}
  ]
}]
Q:是否可以创建带有负值的折线图和柱形图组合?

A:完全有可能像其他JavaScript Web Chart组合图示例一样创建此图。
下面的代码示例演示了此选项。

HTML

<div id="container"></div>

CSS

html, body, #container {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
}

JavaScript

anychart.onDocumentReady(function() {
  // create data set on our data
  var dataSet = anychart.data.set([
    ['P1', 174, 5854, 3242, 162],
    ['P2', -197, -4171, 3171, 134],
    ['P3', -155, -1375, 700, 116],
    ['P4', -15, -1875, 1287, 122],
    ['P5', 66, 2246, 1856, 178],
    ['P6', -85, 2696, 1126, 100],
    ['P7', 37, 1287, 987, 125],
    ['P8', -10, 2140, 1610, 176],
    ['P9', 44, 1603, 903, 111],
    ['P10', 322, 1628, 928, 134]
  ]);
  // map data for the first series, take x from the zero column and value from the first column of data set
  var seriesData_1 = dataSet.mapAs({x: [0], value: [1]});
  // map data for the second series, take x from the zero column and value from the second column of data set
  var seriesData_2 = dataSet.mapAs({x: [0], value: [2]});
  // map data for the third series, take x from the zero column and value from the third column of data set
  var seriesData_3 = dataSet.mapAs({x: [0], value: [3]});
  // create column chart
  chart = anychart.column();
  // turn on chart animation
  chart.animation(true);
  // set chart title text settings
  chart.title('Combination of Column, Spline-Area and Spline Chart');
  // create scale for line series and extraYAxis
  // it force line series to not stuck values with over series
  var scale = anychart.scales.linear();
  // create extra axis on the right side of chart
  var extraYAxis = chart.yAxis(1);
  extraYAxis.title('Secondary Y-Axis');
  extraYAxis.orientation('right');
  extraYAxis.scale(scale);
  // create second series with mapped data
  chart.column(seriesData_2);
  // create third series with mapped data
  var splineArea = chart.splineArea(seriesData_3);
  // create line series and set scale for it
  var lineSeries = chart.spline(seriesData_1);
  lineSeries.yScale(scale);
  lineSeries.stroke('2.5 #ef6c00');
  //draw
  chart.container('container').draw();
});

=====================================================

想要购买Anychart正版授权的朋友可以咨询慧都官方客服

更多精彩内容,欢迎关注下方的微信公众号,及时获取产品最新资讯▼▼▼

跨平台图表控件Anychart常见问题集锦(二):如何删除列边框?



标签:

本站文章除注明转载外,均为本站原创或翻译。欢迎任何形式的转载,但请务必注明出处,尊重他人劳动成果

登录 慧都网发表评论


暂无评论...

为你推荐

  • 推荐视频
  • 推荐活动
  • 推荐产品
  • 推荐文章
  • 慧都慧问
相关厂商
相关产品
AnyChart

灵活的高度可定制的跨浏览器、跨平台JavaScript (HTML5) 图表控件。

在线
客服
在线
QQ
电话
咨询
400-700-1020
购物车 反馈 返回
顶部
在线客服系统
live chat