跨平台图表控件Anychart常见问题集锦（二）：如何删除列边框？

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

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

AnyChart最新试用版

Q：如何删除列（条形，区域）边框/strong>

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格式创建具有多个系列的图表/strong>

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：是否可以创建带有负值的折线图和柱形图组合/strong>

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正版授权的朋友可以咨询官方客服。

标签：