如何在莫里斯图上显示不同的数据？

Question

我有一个莫里斯图表，其中加载了一组数据。在每个项目中有 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();

}

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

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

如何更新我的密钥和标签以及'update'我的图表？

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...

最后，在我的更新函数中，我只是将数据设置为页面加载中的那个变量。

chart.setData(dataGraph);

如何在莫里斯图上显示不同的数据？

How to display different data on Morris Chart?

javascript

jquery

morris.js