我正在尝试使用以下代码动态更改图表主题:
changeTheme(e) {
this.previewService.chartConfig.theme = this.themes[e.target.attributes.value.value];
}
这是我动态改变主题的方式，它反映在json来源的图表，但它没有更新实际的主题。你能给我举个例子吗?请检查这把小提琴。https://jsfiddle.net/pshiral/30955m70/7/
完全公开，我是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>完全公开，我是ZingChart团队的一员。
我已经更新了我们的Angular指令来观察zcreender对象的变化。它将负责图表清理和重新呈现图表。最新版本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);
}
您需要使用默认值而不是主题:请查看附件提琴，让我知道你在找的是同一件东西吗?
zingchart.render({
id : 'myChart',
data : $scope.data,
height : 300,
width : 500,
defaults: $scope.myTheme
});
谢谢。