Question

我在angular2环境中使用谷歌图表（使用此答案开始：Angular2 + Google Charts. How to integrate Google Charts in Angular2?）。我的图表选项设置如下：

chartType: 'CandlestickChart',
options: {
    backgroundColor : '#101010',
    legend: 'none',
    chartArea: {'width': '85%', 'height': '75%'},
    height: 700,
    colors: ['#aaaaaa'],
    textStyle: {color: 'white'},
    tooltip: {isHtml: true},
    slantedText: true,
    slantedTextAngle: 90,
    candlestick: {
        fallingColor: { strokeWidth: 0, fill: '#a52714' }, // red
        risingColor: { strokeWidth: 0, fill: '#0f9d58' }   // green
    },
    vAxis: {
        title :'price',
        titleTextStyle: {
            color: 'white'
        },
        textStyle: {color: 'white'}
    },
    hAxis: {
        title: '',
        titleTextStyle: {
            color: 'white'
        },
        slantedText: true,
        slantedTextAngle: 90,
        textStyle: {color: 'white'},
    }
},
dataTable: [['Date', 'Low', 'Open', 'Close', 'High', 'tooltip']]

然后当我添加行时，我按如下方式执行：

rows.push([data[index].endOfCurrentCandleTime, data[index].low, data[index].open, data[index].close, data[index].high, this.createCustomHTMLContent()]);

但是，我刚收到此错误：

上一个域没有足够的数据列（缺少3个）

如何让Google图表识别最后一列是自定义工具提示？

顺便说一下 - 我已经看过这个（Custom tooltip text in Candlestick chart of google charts）并且它没有帮助

Answer 1

需要定义工具提示列的process = Process.Start("notepad.exe"); process.WaitForInputIdle(); ...

试试这个......

role

用于dataTable: [['Date', 'Low', 'Open', 'Close', 'High', {role: 'tooltip'}]]工具提示......

html

如何在Google烛台图表上显示cutom工具提示？

1 个答案: