Question

我有一个装有数据集的morris图表。在每个项目中有6个不同的数据值。我想在两组不同的数据之间切换。

这里的一个简单示例是我希望始终显示目标并在A / B和A2 / B2之间切换的数据：

[
{
'Target_A':'0',
'Target_B':'0',
'A':'12',
'B':'12',
'A2':'12',
'B2':'4',
'xKeyVal':'2011-12-19'
},
{
'Target_A':'0',
'Target_B':'0',
'A':'12',
'B':'12',
'A2':'8',
'B2':'3',
'xKeyVal':'2012-03-12'
}
]

这是我的切换代码，但它不起作用。我可以在页面加载时加载任意一组数据，但我还不能成功更改它。

function ToggleCC(isChecked){ //This is fired from a checkbox
if(isChecked)
{
    chart.options.ykeys = ['A2', 'Target_A', 'B2', 'LastTarget_B'];
    chart.options.lables= ['A2', 'Target_A', 'B2', 'LastTarget_B'];
}
else
{
    chart.options.ykeys = ['A', 'Target_A', 'B', 'Target_B'];
    chart.options.labels = ['A', 'Target_A', 'B', 'Target_B'];
}
//chart.setData();
chart.redraw();

}

图表是在document.ready函数中创建的全局变量。

$( document ).ready(function() {
    chart = new Morris.Line({
         ...

如何更新我的键和标签并“更新”我的图表？

Answer 1

由于我想重新绑定现有数据，我尝试将图表数据对象传递给setData方法，如下所示：

chart.setData(chart.data);

但是，chart.Data对象与我第一次输入的数据格式不匹配。我的解决方案是将我的json数据设置在一个变量中，然后调用setData并传入该数据。这是最终的代码。

var dataGraph = 'The exact same string/data which was in the Line Chart constructor option.';


   $( document ).ready(function() {
        chart = new Morris.Line({
            // ID of the element in which to draw the chart.
            element: 'IOPChart',
            // Chart data records -- each entry in this array corresponds to a point on
            // the chart.
            data: dataGraph ,
... continue options...

最后在我的更新函数中，我只是将setData设置为来自pageload的变量。

chart.setData(dataGraph);

如何在Morris Chart上显示不同的数据？

1 个答案: