彩票走势图

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

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

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

# 慧都年终大促·界面/图表报表/文档/IDE等千款热门软控件火热促销中 >>

AnyChart是基于JavaScript (HTML5) 的图表控件。使用AnyChart控件,可创建跨浏览器和跨平台的交互式图表和仪表。AnyChart 图表目前已被很多知名大公司所使用,可用于仪表盘、报表、数据分析、统计学、金融等领域。重要推荐:<a href="//chat8.live800.com/live800/chatClient/chatbox.jsp?companyID=60357&configID=149250&jid=1316272045&s=1" target="_blank"  underline; color: rgb(255, 0, 0);">AnyChart已加入在线订购,超值特惠限时抢购!咨询详情>>

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

点击下载AnyChart最新试用版

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

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

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常见问题集锦(二):如何删除列边框?


标签:

本站文章除注明转载外,均为本站原创或翻译。欢迎任何形式的转载,但请务必注明出处、不得修改原文相关链接,如果存在内容上的异议请邮件反馈至chenjj@pclwef.cn


为你推荐

  • 推荐视频
  • 推荐活动
  • 推荐产品
  • 推荐文章
  • 慧都慧问
扫码咨询


添加微信 立即咨询

电话咨询

客服热线
023-68661681

TOP