javascript - 如何使用 ZingChart 创建此图表-6ren

javascript - 如何使用 ZingChart 创建此图表

转载作者：搜寻专家更新时间：2023-11-01 04:22:45

26

4

我正在尝试使用 ZingChart 创建一个外观/功能与此类似的图表。

我已经用我能想到的所有方法调整了条形图，但我仍然没有接近。

这个图表可以用 ZingChart 实现吗？

最佳答案

以下图表是根据您附加的剪切图模仿而来的。如果您对我所做的有任何疑问，我一定可以详细说明。

注意:为获得最佳查看结果，请在完整页面 View 中查看图表。

var myConfig = {
  type:'mixed',
  title: {
    text: 'Rank by MPH',
  },
  scaleX: {
    offset: 0, // force line to start at scale
    offsetEnd: 10, // force last bar away from end of the scale
    maxItems: 2, // force display of first and last labels
    tick: {
      visible:false,
    },
    item: {
      fontColor: '#000',
      fontSize: 14,
      rules: [ // adjust last label
        {
          rule: '%i == 16',
          text: '129',
        }  
      ]
    },
    lineWidth:2,
    lineColor: '#000',
  },
  scaleY: {
    minValue: 0,
    maxValue: 100,
    step: 50,
    format: '%v%',
    markers: [
      { // diagonal line
        type: 'line',
        range: [0,100],
        lineWidth: 3,
        lineColor: '#000',
      }  
    ],
    tick: {
      visible:false,
    },
    item: {
      fontColor: '#000',
      fontSize: 14
    },
    guide: {
      visible: false,
    },
    lineWidth:2,
    lineColor: '#000',
  },
  labels: [ 
    { // hook label to line marker to display rank
      hook: 'node:plot=1,index=1',
   	  backgroundColor: '#000',
   	  fontColor: '#fff',
   	  text: 'Rank 11 / 16',
      calloutWidth: 20,
 	    callout: true,
 	    calloutPosition: 'bottom',
 	    padding: 15,
 	    borderRadius: 10,
 	    fontSize: 15,
 	    offsetY: -50,
    },    
    { // hook label to scale to display mph
      hook: 'scale:index=11',
   	  text: '100 mph',
 	    fontSize: 15,
 	    offsetY: 15,
    },
  ],
	series: [
		{
	   	type: 'bar', 
	   	barWidth:20,
	   	barSpacing:1,
	   	borderRadius:'10 10 0 0',
	   	backgroundColor: '#c0c0c0',
	   	tooltip: {
	   	  backgroundColor: '#000',
	   	  text: 'Rank %i / 16',
        calloutWidth: 20,
   	    callout: true,
   	    calloutPosition: 'bottom',
   	    padding: 15,
   	    borderRadius: 10,
   	    fontSize: 15,
   	    placement: 'node:top',
   	    offsetY: -20,
	   	},
	   	rules: [
	   	  { // make one bar purple
	   	    rule: '%i == 11',
	   	    backgroundColor: 'purple',
	   	  }
	   	],
			values: [null,5,9,12,19,25,30,34,39,45,49,54,58,65,69,74,79],
		},
		{
		  type: 'line',
		  lineColor: 'purple',
		  lineStyle: 'dotted',
	   	valueBox: {
	   	  text: '%v%',
	   	  placement: 'left',
	   	  offsetX: -18,
	   	  fontSize: 12,
	   	  rules: [
	   	    { // hide the valuebox at the node on the line
	   	      rule: '%i == 1',
	   	      visible: false,
	   	    }  
	   	  ],
	   	},
		  marker: {
		    borderColor: 'purple',
		    borderWidth: 2,
		    backgroundColor: '#fff',
		    size: 9,		  
		    rules: [ 
  		    { // hide first marker of the line
  		      rule: '%i == 0',
  		      visible:false,
  		    }  
  		  ],
		  },
		  values: [[0,69], [11,69]], // array of arrays to better plot the line
		}
	]
};

zingchart.render({ 
	id: 'myChart', 
	data: myConfig, 
	height: '100%', 
	width: '100%',
});

html, body {
	height:100%;
	width:100%;
	margin:0;
	padding:0;
}
#myChart {
	height:100%;
	width:100%;
	min-height:150px;
}
.zc-ref {
	display:none;
}

<!DOCTYPE html>
<html>
	<head>
		<script src= "https://cdn.zingchart.com/zingchart.min.js"></script>
	</head>
	<body>
		<div id="myChart"><a class="zc-ref" href="https://www.zingchart.com">Powered by ZingChart</a></div>
	</body>
</html>

关于javascript - 如何使用 ZingChart 创建此图表，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/41123316/

26

4

0

文章推荐： javascript - 如何取消 ComponentWillUnmount 中的所有请求？

文章推荐： javascript - 根据 JSON 数据添加类

zingchart - ZingChart 中格状饼图的标题
我有一个网格样式的饼图(同一网格中有多个饼图)，类似于 http://www.zingchart.com/docs/chart-types/pie/#pie__trellis_chart .我使用的代
zingchart - ZingChart 饼图切片的百分比
(我以前问过一次类似的问题，但这个问题又出现了。) 我使用 ZingCharts 制作了一个非常简单的饼图，但即使 ZingCharts 网站上的所有示例都显示了每个切片的百分比，我也无法显示要显示的
zingchart - 如何强制 Zingchart 刷新
我们使用套接字库从我们的服务中下载数据。我正在执行以下操作，将这些数据发送到 zingchart(数据按摩后): myChart.series[0].values.push([xVal, yVal])
zingchart - 使用 ZingChart 在饼图切片上显示百分比
在此页面上:http://www.zingchart.com/docs/chart-types/pie/ 许多示例饼图显示每个切片的百分比。但我无法重现这个。如何显示每个切片的百分比。请注意，我还将单
zingchart - 使用 ZingChart 的多维堆叠条形图
我正在尝试使用 ZingChart 创建多维堆叠条形图。据我所知: 由于某种原因，图像没有显示。它的链接是 ( https://drive.google.com/file/d/0B14IyWv9zwZ
css - 绘制一个完全响应的 zingchart 和一个视觉上吸引人的 zingchart(宽度方向)
需要绘制一个完全响应且视觉准确的 zingchart。据我所知，我们需要为要在其中绘制 zingchart 的 div 提供以 % 为单位的高度和宽度(例如:100% 或 80%)。在编写 zingc
zingchart - 如何在 ZingChart 中为 x 和 y 轴添加标题
我想使用 ZingChart 为 x 和 y 轴添加标题。例如，如果我的 x 轴显示年份(2010、2011、2012 等)，我希望标题“会计年度”显示在每个年份标签下方同样，如果我在 y 轴上测量
zingchart - 动态添加刻度标记？
我想知道是否有任何方法可以在渲染图形后动态添加 scale-x 标记，也许是通过像这样的函数: zingchart.exec('myChart', 'addscalexmarker', { t
zingchart - 值框背景消失了
我有一个混合图表，带有顶部放置的值框。除了第一个值之外，所有值的背景色都从值框中消失了。这以前工作正常，因为白色背景出现在所有值框后面，并且代码没有更改，所以我不知道为什么背景颜色突然消失了。下面是我
zingchart - 如何设置Zingchart线边框？
是否可以在zingchart中画一 strip 边框的线？我有一个 "type" : "line", "values" : [something], "line-color": "#some
zingchart - 在ZingChart中设置饼图的大小
我有一个包含多个饼图的视觉效果(我有一个包含多个单独饼图的图形集)。我希望每个饼图的大小能够反射(reflect)每个饼中数据的大小。例如，显示 2010 年收入为 1,000,000 美元的饼图将小
zingchart - 未找到数据时不呈现图表或显示消息或类似内容
我正在使用向下钻取饼图向下钻取到节点的子节点等。问题是在某些时候，子节点不包含任何数据。有没有一种方法可以在图表内显示一条消息或类似的东西，而不是一个白色区域(因为没有系列数据)来通知用户没有更多的数
ZingChart - 形状作为标签
我需要在我的图表上添加一些额外的标签，所以我使用了形状。结果如下: http://jsfiddle.net/z3n3qobm/91/ 但我需要将示例中的圆圈与 X 轴的标签对齐。图表必须是响应式的
angularjs - ZingChart 条形图未正确生成
html file in controller.js $scope.myObj = { "type": "bar", "utc": true, "plotarea":{ "m
height - ZingChart 的高度和宽度百分比不起作用
每当我以百分比设置 ZingChart 的高度和宽度以使其与所有屏幕尺寸兼容时，它都不起作用。示例:如果我设置 1% 的高度和 1% 的宽度，则不会发生这种情况。我将高度和宽度更改为: zingc
charts - ZingChart 单系列条形图组标签
因此，我被要求向使用 ZingChart 构建的条形图添加额外的标签层。我们基本上有一个单系列柱状图，用于绘制子类别内特定类别的标准评级。目前子类别在图表中根本没有作用，因为我绘制了类别中每个标准的
zingchart - 节点填充的条形图是透明的，条形仅在悬停时显示
这是我正在尝试做的一个例子: http://jsfiddle.net/4pb8uzt8/13/ $scope.myJson = { 'plot': { 'styles': ['#fff
zingchart - x 轴上带有时间戳的静态图表
我想创建一个从 MySQL 数据库中提取的值的静态图表。图表格式为(x 轴:dd/mm/yy hh:mm:ss(对应于 mysql 数据库的时间戳))，y 轴为 double 值。我能够从 MySql
charts - Zingchart 点击事件处理
我不确定在 html 页面中将以下 zingchart click 事件处理代码放在哪里。 zingchart.click = 函数(dataStr){ var data = eval('(' + d
coldfusion - Zingchart 通过冷融合获取图像数据
我正在尝试提取通过 CFCHART 生成的 zingchart 的 SVG 内容并将其传递给我的服务器以将 SVG 转换为 PNG $('#downloadGraph').click(function

首页

博学

6Ren·AI

商城

javascript - 如何使用 ZingChart 创建此图表