标签: zingchart

我有一个ZingChart(通过cfchart),它有一个外部JSON样式文件.如何为图表中的所有文本设置字体属性,如font-family,font-weight,font-size,而无需单独设置？

到目前为止我的JSON文件:

{
"graphset":[
    {       
        "background-color":"white",
        "font-family":"Courier New",
        "scale-x":{
            "label":{
                "text":"Date"
            }
        },
        "scale-y":{
            "label":{
                "text":"Score"
            },
            "markers":[
                {
                    "type":"line",
                    "range":[75,76],
                    "line-color":"red"
                },
                {
                    "type":"line",
                    "range":[50,51],
                    "line-color":"yellow"
                }
            ]
        },
        "tooltip" : {
            "text" : "Score of %v on %k",
            "background-color" : "#ff9900"
        },
        "plot":{
            "marker":{
                "type":"square"
            }
        }
    }
  ]
}

我知道我可以单独添加它,例如,所有scale-x"item"":

"scale-x":{
            "label":{
                "text":"Date"
            },
             "item":{ 
                "font-angle":320,
                "font-family":"Arial",
                "font-weight":"bold",
                "font-size":13
            }
        }

但是我想为图表中的所有文本添加它.

我们使用套接字库从我们的服务下载数据.我正在做以下事情将此数据发送到zingchart(在按摩数据后):

myChart.series[0].values.push([xVal, yVal]); // index 0 is hard coded for demo

图表不刷新.我们希望他们感觉像是实时的.

我正在尝试显示负值的图表.x轴应位于左侧的中心负值和右侧的正值.绘制图表的值范围从负到正.下面的快照附加了我试图使用zingchart实现的相同.

请帮助我一个可以帮助我实现所需图表的示例.

我想绘制日期时间与整数的关系.我尝试了日期(年,月,日,小时,分钟,秒),但它不支持它.那么可以使用zingChart在x轴上绘制日期时间吗？

在Zingchart中创建混合图表时,我们可以使用values数组传递类型属性值.但我不确定何时从CSV读取数据如何实现.我想创建混合图表,如下面的小提琴链接,但数据将从csv文件中读取.

  var myConfig = 
      {
      "type":"mixed",
      "series":[
        {
          "values":[51,53,47,60,48,52,75,52,55,47,60,48],
          "type":"bar",
          "hover-state":{
            "visible":0
          }
        },
        {
          "values":[69,68,54,48,70,74,98,70,72,68,49,69],
          "type":"line"
        }
      ]
    }
  zingchart.render({ 
	id : 'myChart', 
	data : myConfig, 
	height: 500, 
	width: 725 
});

<script src="https://cdn.zingchart.com/zingchart.min.js"></script>
<div id="myChart"></div>

我正在尝试使用以下代码动态更改图表主题:

changeTheme(e) {
        this.previewService.chartConfig.theme = this.themes[e.target.attributes.value.value];
      }

这是我动态更改主题的方式,它反映在图表的json源中,但它没有更新实际主题.你能告诉我一个有效的例子吗？请检查这个小提琴. https://jsfiddle.net/pshiral/30955m70/7/

html文件

<zingchart id="timesheet-bar-chart" zc-json="myObj"></zingchart>

在controller.js中

$scope.myObj = {
  "type": "bar",
  "utc": true,
  "plotarea":{
      "margin":'dynamic'
    },
  "plot":{
    "stacked":true,
    "stack-type":"normal" /* Optional specification */
  },
 "scaleX":{
      "transform":{
        "type":"date",
        "all":"%d %M",
        "item": {
          "visible":false
        }
      },
    },
  "series":[{ 
      "values": $scope.barValues,
      "backgroundColor":"#f15662"
    }]
  };
zingchart.render({ 
id : 'timesheet-bar-chart', 
height: 400, 
width: "100%"
});

在$ scope.barValues中,数据以下面的格式动态添加

[[[1478025000000,10],[1477938600000,20],[1478889000000,30]]]

我没有得到任何错误.生成的栏不是格式.请帮帮我,我是第一次使用ZingChart库.

有人可以向我解释为什么第一个系列价值框没有出现但其余部分是？我现在一直在撞墙上一小时.我在下面伪造了数据,但结果是一样的.先感谢您!

var ctFin = 60;
var myConfig = {
  "type": "hbar",
  "font-family": "proxima_nova_rgregular",
  "title": {
    "text": "MINUTES <b>IN ZONES</b>",
    "font-family": "proxima_nova_rgregular",
    "background-color": "none",
    "font-color": "#39393d",
    "font-size": "22px",
    "adjustLayout": true,
    "height": "35px",
    "padding-bottom": "23px"
  },
  "plot": {
    "bars-overlap": "1%",
    "borderRadius": "0 3px 3px 0",
    "hover-state": {
      "visible": false
    },
    "animation": {
      "delay": 300,
      "effect": 4,
      "speed": "500",
      "method": "0",
      "sequence": "3"
    }
  },
  "plotarea": {
    "height": "99px",
    "border-left": "3px solid #39393d",
    "padding-left": "3px",
    "margin": "0 0 0 3px"
  },
  "scale-x": { …

我一般都是角度和Web应用程序的新手,我很难尝试使用zingchart.

我想做的是通过zingchart在角度应用程序上创建图表,但是当我尝试运行我的应用程序时,我在浏览器控制台上收到此错误.

我确定我已经在我的控制器中正确添加了'zingchart-angularjs'依赖项,但我不确定在我的hmtl中声明zingchart库.我有几个问题,请:

1)我下载了zingchart,但在下载后找不到zingchart.min.js文件.让整个事情发挥作用有多重要？如何下载？

2)我在日食工作.我应该在eclipse上安装zingchart作为插件吗？如果是这样,有人可以帮忙吗？到目前为止,我只是将zingchart-angularjs.js文件移动到我的项目文件夹,并在脚本标记内的html上声明了它的路径.它会在日食上运作吗？

3)我应该如何在html中准确声明zingchart库？我的意思是,我应该通知zingchart-angularjs.js文件的完整路径,例如" script type ="text/javascript"src ="C:/ kdi/workspace/cnt-ui-web/src/main/webapp/app/spas/cnt/partials/zingchart.min.js" / script或声明相对路径是否足够？如果是后者,该怎么办？

谢谢.

ZingChartclick事件表明回调将接收一个对象。该x属性将包含

单击相对于图表位置的 x 位置

我假设这是窗口中的光标位置（即像素）相对于包含图形的 div 元素的位置（左上角？）。

有没有办法在单击时获取十字线位置的“X”值，如图所示： 示例

即，如果十字准线位于“0”，我想在单击时获得该值。当我使用arg.x点击事件时，十字准线位于“0”，我得到 49，而我需要 0。

代码：

var values = [0,2.81,5.61,8.38, ...]

var chartData={
    "type":"line",  // Specify your chart type here.
    "background-color":"#f4f4f4",
    "scale-x": {
        "zooming":true
    },
    "plot": {
//        "mode":"fast",
        "exact":true,
//        "smartSampling":true,
//        "maxNodes":0,
//        "maxTrackers":0,
        "lineWidth":2,
        "shadow":false,
        "marker":{
            "type":"none",
            "shadow":false
        }
    },
    "plotarea":{
        "background-color":"#fbfbfb",
        "margin-top":"30px",
        "margin-bottom":"40px",
        "margin-left":"50px",
        "margin-right":"30px"
    },
    "scaleX":{
        "autoFit":true,
        "zooming":true,
        "normalize":true,
        "lineWidth":1,
        "line-color":"#c7c9c9",
        "tick":{
            "lineWidth":1,
            "line-color":"#c7c9c9"
        },
        "guide":{
            "visible":false
        },
        "item":{
            "font-color":"#818181",
            "font-family":"Arial",
            "padding-top":"5px" …