谷歌图表-来自本地json文件的数据-自定义工具提示_Json_File_Charts_Google Visualization_Tooltip

谷歌图表-来自本地json文件的数据-自定义工具提示

json file charts google-visualization

谷歌图表-来自本地json文件的数据-自定义工具提示,json,file,charts,google-visualization,tooltip,Json,File,Charts,Google Visualization,Tooltip,我正在使用谷歌图表创建dvb-c频道可用性图表。本地json文件中的图表数据为红色。图表运行得很好，但我想添加一个功能，但我需要一些帮助我想添加的功能是自定义工具提示，但我不知道如何做。我知道我必须将想要的数据添加到json中，但正如我所说的，我不知道如何做，也不知道如何更改html代码才能使其正常工作。我希望工具提示读取本地html文件并显示工具提示上的内容以下是我的html代码： <!DOCTYPE html> <html> <head&g

我正在使用谷歌图表创建dvb-c频道可用性图表。本地json文件中的图表数据为红色。图表运行得很好，但我想添加一个功能，但我需要一些帮助

我想添加的功能是自定义工具提示，但我不知道如何做。我知道我必须将想要的数据添加到json中，但正如我所说的，我不知道如何做，也不知道如何更改html代码才能使其正常工作。我希望工具提示读取本地html文件并显示工具提示上的内容

以下是我的html代码：

   <!DOCTYPE html>
   <html>
   <head>
       <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
       <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
   </head>

    <body>
        <div id="chart" style="width:3000px; height:600px;"></div> 
    </body>

    <script>
        // Visualization API with the 'corechart' package.
        google.charts.load('visualization', { packages: ['corechart'] });
        google.charts.setOnLoadCallback(drawLineChart);

        function drawLineChart() {
            $.ajax({
                url: "./avail.json",
                dataType: "json",
                type: "GET",
                contentType: "application/json; charset=utf-8",
                success: function (data) {
                var channels = [['Channel', 'HKI (%)', 'LTI (%)']];    // Define an array and assign columns for the chart.

                // Loop through each data and populate the array.
                $.each(data, function (index, value) {
                    channels.push([value.Channel, value.HKI, value.LTI]);
                });

                // Set chart Options.
                var options = {
                    title: 'DVB-C Availability (HKI & LTI)',
                series: {
                    0: { color: '#ff3385', lineWidth: 5, pointSize: 5 },
                        1: { color: '#000000', lineWidth: 1, pointSize: 3},
                },
                vAxis: { "title": "Availability (%)", maxValue: 100 },
                hAxis : { "title": "Channels", showTextEvery:1, textStyle : {fontSize: 8, bold:'true' }, slantedText:true, slantedTextAngle:45 },
                chartArea:{left:70,top:50,right:40,width:"90%",height:"70%"},
                tooltip: {isHtml: true, trigger: 'both'},
                    legend: { position: 'top', textStyle: { color: '#555', fontSize: 14} } 
                };




                // Create DataTable and add the array to it.
                var figures = google.visualization.arrayToDataTable(channels)

                // Define the chart type (LineChart) and the container (a DIV in our case).
                var chart = new google.visualization.LineChart(document.getElementById('chart'));
                chart.draw(figures, options);      // Draw the chart with Options.
                },
                error: function (XMLHttpRequest, textStatus, errorThrown) {
                     alert('Got an Error');
                }
            });
    }
</script>
</html>

我应该在json中添加类似的内容吗

[
{ "Channel": "MTV Rocks", "HKI": 99.104700, <object data="./hki1.html"></object> "LTI": 98.760400, <object data="./lti1.html"></object> },
{ "Channel": "MTV3 HD", "HKI": 99.724600, <object data="./hki1.html"></object>"LTI": 99.724600, <object data="./lti1.html"></object> },
{ "Channel": "MTV3", "HKI": 100.000000, object data="./hki1.html"></object>"LTI": 100.000000, object data="./lti1.html"></object> },
]

[
{“海峡”：“MTV岩石”，“HKI”：99.104700，“LTI”：98.760400，}，
{“频道”：“MTV3高清”，“HKI”：99.724600，“LTI”：99.724600，}，
{“频道”：“MTV3”，“HKI”：100.000000，对象数据=“./hki1.html”>“LTI”：100.000000，对象数据=“./lti1.html”>，
]

如果这是更改json的正确方法，我不知道如何更改html代码来实现这一点

也许有人能帮我解决这个问题？

首先，

'visualization'

不是谷歌图表的有效版本号。
看起来这是旧库加载程序代码留下的。
改用

“当前”

google.charts.load('current', { packages: ['corechart'] });

接下来，您需要将html从文件复制到json中，
而不是尝试引用外部文件

工具提示只需要html片段，而不是完整的文件

要添加自定义工具提示，首先需要为工具提示添加列。
它应该是一个对象，如下所示

{type: 'string', role: 'tooltip', p: {html: true}}

如果您想要

“HKI”

和

“LTI”

的工具提示，
您需要在每个列标题后添加上面的工具提示列

var channels = [['Channel', 'HKI (%)', {type: 'string', role: 'tooltip', p: {html: true}}, 'LTI (%)', {type: 'string', role: 'tooltip', p: {html: true}}]];

加载行时包含html

  $.each(data, function (index, value) {
    channels.push([
      value.Channel,
      value.HKI,
      '<div>custom html goes here</div>',
      value.LTI,
      '<div>custom html goes here</div>'
    ]);
  });

谢谢你，白帽！我有150个通道需要监控，所有通道都有两个测量点（两个不同的数据中心）。如果比特率低于某个值，它将被记录到计划在工具提示中使用的html文件中。所以，将会有300个单独的html文件，我非常确定这些文件最容易包含在json文件中（如果我错了，请纠正我）。Mysql/数据库使用在这里不是一个选项。我不能像你在js脚本“自定义html在这里”中建议的那样介绍它们。除此之外还有其他方法吗？？？：var data=[{“Channel”：“MTV Rocks”，“HK…”在图表的

'onmouseover'

事件中显示html文件，而不是在自定义工具提示中显示html文件可能是有意义的…我非常感谢你。有什么方法可以做到这一点，json有每个频道错误的url吗（对于HKI和LTI）？可能只在工具提示上显示html文件的链接？我成功地实现了这一点。我必须使此部分与众不同：frame.src='../'+figures.getColumnLabel（props.column）+（props.row+1）+'.html'；非常感谢Whitehat！

  $.each(data, function (index, value) {
    channels.push([
      value.Channel,
      value.HKI,
      '<div>custom html goes here</div>',
      value.LTI,
      '<div>custom html goes here</div>'
    ]);
  });