在 zingchart 中动态更改图表主题不起作用答案

【问题标题】：Changing chart theme dynamically in zingchart is not working在 zingchart 中动态更改图表主题不起作用
【发布时间】：2016-08-25 14:34:31
【问题描述】：

我正在尝试使用此代码动态更改图表主题：

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

这是我动态更改主题的方式，它反映在图表的 json 源中，但并未更新实际主题。你能给我看一个同样的工作例子吗？请检查这个小提琴。 https://jsfiddle.net/pshiral/30955m70/7/

【问题讨论】：

标签： javascript charts zingchart

【解决方案1】：

完全公开，我是 ZingChart 团队的成员。

主题在我们图书馆的最高级别工作。我们根据主题中的属性以自上而下的方式构建图表片段。因此，您只能在渲染级别设置和更新主题。这意味着您将不得不销毁图表并重新渲染它以更改主题。查看以下内容：

var myConfig = {
 	type: "bar", 
	series : [
		{
			values : [35,42,67,89,25,34,67,85]
		}
	]
};

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

function changeTheme(e) {
  zingchart.exec('myChart','destroy');
  zingchart.render({ 
  	id : 'myChart', 
  	data : myConfig, 
  	height : 400, 
  	width : 600,
  	theme: this.id
  });
}
document.getElementById('light').addEventListener('click',changeTheme);
document.getElementById('dark').addEventListener('click',changeTheme);

<!DOCTYPE html>
<html>
	<head>
		<script src= "https://cdn.zingchart.com/zingchart.min.js"></script>
		<script> zingchart.MODULESDIR = "https://cdn.zingchart.com/modules/";</script>
	</head>
	<body>
		<div id='myChart'></div>
		<button id='light'>Light Theme</button>
		<button id='dark'>Dark Theme</button>
	</body>
</html>

【讨论】：

还有一件事是，要改变背景，不需要重新渲染图表，所以我认为它也应该与主题一样工作。您能否提供更优化的方式？到处都需要'id'吗？我们可以消除到处使用 id 吗？
我附上了 jsfiddle。请看一看。我想动态使用自定义主题。

【解决方案2】：

完全披露，我是 ZingChart 团队的成员。

我已经更新了我们的 Angular 指令来观察 zcRender 对象的变化。它将负责图表清理并为您重新渲染图表。最新版本 1.2.1 可从github 或npm 下载。我在plnkr 中整理了一个小演示，展示了这些变化。

                // If defaults or theme has changed. 
            // Destroy and re-render chart
            $scope.$watch('zcRender', function(newValue, oldValue, scope) {
              if(initializing.render){
                  initializing.render = !initializing.render;
                  return;
              }
              // console.log('---newValue',newValue)
              // console.log('---oldValue',oldValue)
              // console.log('---scope',scope)

              zingchart.exec(scope.id, 'destroy');
              scope.zcRender = newValue;
              scope.renderChart();
            },true);

            // Break render function out of link so we can consistently
            // call the same rendering algorithm
            $scope.renderChart = function (){
              var id = $element.attr('id');
              //Defaults
              var _json = {
                  data : {
                      type : 'line',
                      series : []
                  },
                  width : 600,
                  height: 400
              };

              //Add render object.
              if($scope.zcRender){
                  mergeObject($scope.zcRender, _json);
              }

              //Add JSON object
              if($scope.zcJson){
                  mergeObject($scope.zcJson, _json.data);
              }

              //Add Values
              if($scope.zcValues){
                injectValues($scope.zcValues, _json.data);
              }

              //Add other properties
              _json.data.type = ($attrs.zcType) ? $attrs.zcType : _json.data.type;
              _json.height = ($attrs.zcHeight) ? $attrs.zcHeight : _json.height;
              _json.width = ($attrs.zcWidth) ? $attrs.zcWidth : _json.width;
              _json.id = id;

              //Set the box-model of the container element if the height or width are defined as 100%.
              if(_json.width === "100%" && !$element.css('width')){
                  $element.css('width', '100%');
              }
              if(_json.height === "100%" && !$element.css('height')){
                  $element.css('height', '100%');
              }
              zingchart.render(_json);
          }

【讨论】：

【解决方案3】：

您需要使用默认值而不是主题：请检查附加的小提琴，让我知道你正在寻找的是同一个东西吗？

zingchart.render({ id : 'myChart', data : $scope.data, height : 300, width : 500, defaults: $scope.myTheme });

https://jsfiddle.net/omix3379/4k0v06cL/

谢谢。

【讨论】：